SVG模式仅在Firefox上不可见

时间:2019-02-05 14:04:47

标签: firefox svg

我的模式在Firefox中不可见:

顶部:Chrome浏览器

enter image description here

底部:Firefox

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,但实际上并没有任何改变。

1 个答案:

答案 0 :(得分:1)

我已经删除了模式#a,现在它也适用于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>