Firefox SVG的填充:url(#id)样式在外部样式表破碎，内联样式是好的

Question

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

{

路径填充:url (# ref);}

在外部样式表中，它呈现不可见。如果我把它放在内联，或者在页面上的标签中，它就能工作。

这是我的小提琴，这是我的代码转储，因为SO不让我发布小提琴。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:n -child(6n + 2) path {填充:url (# texture1);}

https://dl.dropbox.com/s/wkzaoiwnw6limd/simple_svg_test.css

Answer 1

#texture1是<url of this file> + #texturl的缩写。因此，在外部样式表中，#texture1将指向样式表本身中的某些东西，这些东西不会被发现，因为元素在svg文件中。

Webkit总是把这个弄错，这导致了很多混乱。你应该会发现Opera和IE的行为匹配。

如果你想在样式表中做到这一点，你必须使用绝对URL，例如URL (http://jsfiddle.net/v5VDp/1/#texture1)

这是CSS规范所涵盖的。你可以随时联系CSS工作组，建议他们做点什么。

Answer 2

SVG " fill: url(#…)"在Firefox中使用css(包括外部和内部css)分配以下代码时表现奇怪

#myselector {
fill: url('#gradient-id');
}

解决方案

给出内联样式，这可以通过两种方式完成。静态或动态方式

动态的方式

.attr('fill', 'url(#gradient-id)')

静态方法

fill="url(#gradient-id)" 

在静态情况下你必须把它放在SVG Html中;