【问题标题】:SVG pattern not visible only on FirefoxSVG 模式仅在 Firefox 上不可见
【发布时间】:2019-02-05 14:04:46
【问题描述】:

我的模式在 Firefox 中不可见:

顶部:Chrome

底部:火狐

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】:

    我已经删除了#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>

    【讨论】:

    • 实际上你改变了一些部分。我试图弄清楚为什么它适用于您的示例而不是我的示例。如果我发现你得到了当然的接受状态
    猜你喜欢
    • 1970-01-01
    • 2019-12-23
    • 2021-06-02
    • 1970-01-01
    • 2012-08-10
    • 2014-07-05
    • 2012-09-01
    • 1970-01-01
    • 2012-07-19
    相关资源
    最近更新 更多