Question

仅在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）路径{ fill：url（#textite1）; }

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

Answer 1

#texture1是<url of this file> + #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。

Answer 2

当我们使用css（外部和内部css）分配以下代码时，SVG“fill：url（＃...）”在Firefox中表现得很奇怪。

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

解决方案

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

动态方式

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

静态方式

fill="url(#gradient-id)"

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

Firefox SVG用fill：url（#id）样式打破外部样式表，内联样式很好

2 个答案: