Firefox SVG与填充：外部样式表中的URL（#id）风格破碎，内联样式很好

问题描述

在Firefox中，如果我尝试给svg路径一个模式引用，如：

路径{
fill：url（#ref）;
}

在外部样式表中呈现不可见。如果我以内联方式，或在页面上的标签，它的作品。

这里是我的小提琴，这里是我的代码转储，因为不会让我发布只是小提琴。

$ b

 < pattern id =texture_basex =0y = 0patternUnits =userSpaceOnUseheight =122width =213> 
< image x =0y =0width =213height =122xlink：href =/> 
< / pattern> 
 
  < rect fill ='url（#texture_base）'x =0y =0width =213height =122/ /> 
 
< / pattern> 
< / defs> 
< / svg> 
 
 
 
 
 
 $ .slice：nth-​​child（6n + 2）path { 
 fill：url（＃texture1）; 
} 
 
 
 
 
 
       ＃texture1 是<此文件的url>的简写 +  #texturl 。所以在外部样式表中，$ ＃texture1 会指向样式表本身，因为这个元素在svg文件中，所以不会被找到。
 
 
 
 Webkit总是有这个错误导致很多混淆。您应该发现Opera与IE一样匹配Firefox的行为。
 
 
 
如果您想在样式表中执行此操作，您必须使用绝对URL url（）
 
 
 
这包含在。你总是可以联系。 。
 
In Firefox only, if I try to give a svg path a pattern reference like: 

path {
  fill: url(#ref);
}

in an external style sheet, it renders invisible. If I do it inline, or in a  tag on the page, it works. 

Here is my fiddle, and here is my code dump because SO won't let me post just the fiddle.
http://jsfiddle.net/v5VDp/1/



    <pattern id="texture_base" x="0" y="0" patternUnits="userSpaceOnUse" height="122" width="213">
        <image x="0" y="0" width="213" height="122" xlink:href=""/>
    </pattern>

        <pattern id="texture1" x="0" y="0" patternUnits="userSpaceOnUse" height="122" width="213">
        <rect fill='url(#color1)' stroke="none" x="0" y="0" width="213" height="122"/> 
            <rect fill='url(#texture_base)' x="0" y="0" width="213" height="122"/ />

    </pattern>
</defs>
</svg>
 .slice:nth-child(6n + 2) path {    fill: url(#texture1);}
https://dl.dropbox.com/s/wkzaoiwnw6ghsmd/simple_svg_test.css
 解决方案 
#texture1 is short for <url of this file> + #texturl. So in an external stylesheet #texture1 will point to something in the stylesheet itself which won't be found as the element is in the svg file.
Webkit has always got this wrong which causes much confusion. You should find Opera matches Firefox behaviour as does IE.
If you want to do this in the stylesheet you'd have to use an absolute URL e.g. url(http://jsfiddle.net/v5VDp/1/#texture1)
This is covered by the CSS specification. You could always contact the CSS working group and suggest that they do something about it.
                        
这篇关于Firefox SVG与填充：外部样式表中的URL（#id）风格破碎，内联样式很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！