SVG图形不可见只在Firefox

问题描述 投票:0回答:1

我的模式是在Firefox中不可见:

上图:镀铬

enter image description here

下图:火狐

enter image description here

SVG编码(但取悦了一点看图片)

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 120 120" version="1.1" viewBox="0 0 120 120" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:none;}
    	.st1{opacity:0.48;}
    	.st2{fill:#FFF99A;}
    	.st5{fill:url(#a);stroke:#007BFF;stroke-width:0.5;stroke-miterlimit:10;}
    </style>
    <pattern id="b" y="120" width="200" height="200" overflow="visible" patternUnits="userSpaceOnUse" viewBox="0 -200 200 200">
    		<rect class="st0" y="-200" width="200" height="200"/>
    		<rect class="st0" y="-200" width="200" height="200"/>
    		<g class="st1">
    			<rect class="st2" y="-100" width="200" height="100"/>
    		</g>
    		<g class="st1">
    			<rect class="st2" x="100" y="-200" width="100" height="200"/>
    		</g>
    </pattern>
    	
    <pattern id="a" xlink:href="#b" patternTransform="matrix(.014142 -.014142 -.014142 -.014142 -16028 -559.29)">
    </pattern>
    
    <path class="st5" d="m87.5 87.5v23.1c0 3.5-2.6 6.4-6.1 6.8-21.7 2.6-42.3 0-50.3-1.2-2.1-0.3-3.6-2.1-3.6-4.2 0-5.6 0.1-16.7 0.5-24.4h23.5"/>
    
    </svg>

任何想法,为什么?

我发现这个question,但它确实没有任何改变。

firefox svg
1个回答
1
投票

我已经去除了图案#aand现在它在FF作品太

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 120 120" version="1.1" viewBox="0 70 120 65" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:none;}
    	.st1{opacity:0.48;}
    	.st2{fill:#FFF99A;}
    	.st5{fill:url(#b);stroke:#007BFF;stroke-width:0.5;stroke-miterlimit:10;}
    </style>
    <pattern id="b" y="120" width="200" height="200" overflow="visible" patternUnits="userSpaceOnUse" viewBox="0 0 200 200" patternTransform="matrix(.014142 -.014142 -.014142 -.014142 -16028 -559.29)">
    		<rect class="st0"  width="200" height="200"/>
    		<rect class="st0"  width="200" height="200"/>
    		<g class="st1">
    			<rect class="st2" y="100" width="200" height="100"/>
    		</g>
    		<g class="st1">
    			<rect class="st2" x="100"  width="100" height="200"/>
    		</g>
    </pattern>
    	
    
    
    <path class="st5" d="m87.5 87.5v23.1c0 3.5-2.6 6.4-6.1 6.8-21.7 2.6-42.3 0-50.3-1.2-2.1-0.3-3.6-2.1-3.6-4.2 0-5.6 0.1-16.7 0.5-24.4h23.5"/>
    
    </svg>
© www.soinside.com 2019 - 2024. All rights reserved.