html – Firefox SVG与填充:url(#id)样式在外部样式表中断,内联样式很好

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

路径{
fill: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:nth-​​child(6n 2)path {
fill:url(#texture1);
}

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

解决方法

#texture1是<此文件的网址>的缩写#texturl.因此,在外部样式表中,#texture1将指向样式表本身中的某些内容,因为该元素位于svg文件中,因此无法找到该内容.

Webkit总是出错,导致很多混乱.您应该发现Opera与IE一样匹配Firefox行为.

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

这一点由CSS specification涵盖.您可以随时联系CSS working group and suggest that they do something about it.

相关文章

操作步骤 1、进入elasticsearch的plugin,进入ik。进入config。 2、在config下面建立以.dic为后缀的字典...
lengend data数据中若存在&#39;&#39;,则表示换行,用&#39;&#39;切割。
代码实现 option = { backgroundColor: &amp;#39;#080b30&amp;#39;, tooltip: { trigger: &...
问题原因 原因在于直接在js中取的变量并复制给var变量。 于是就变成这样。 解决办法 var data = &#...
前言 最近做了一个调查问卷导出的功能,需求是将维护的题目,答案,导出成word,参考了几种方案之后,选...
对于很多人来说,用字符编码都是熟能生巧,而不清楚为什么是那样的字符编码,所以我在这列了一个表,翻...