7

仅在 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:nth-child(6n + 2) 路径 { 填充：url(#texture1); }

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

4

2 回答 2

8

#texture1是<url of this file>+的缩写#texturl。因此，在外部样式表#texture1中将指向样式表本身中的某些内容，因为该元素位于 svg 文件中，因此无法找到该内容。

Webkit 总是犯这个错误，导致很多混乱。您应该会发现 Opera 与 IE 一样匹配 Firefox 行为。

如果您想在样式表中执行此操作，则必须使用绝对 URL，例如 url( http://jsfiddle.net/v5VDp/1/#texture1 )

CSS 规范涵盖了这一点。您可以随时联系CSS 工作组并建议他们对此做些什么。

于 2013-04-05T20:31:56.953 回答
2

当我们用 css（外部和内部 css）分配以下代码时，SVG “fill: url(#...)” 在 Firefox 中的行为很奇怪。

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

解决方案

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

动态方式

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

静态方式

fill="url(#gradient-id)"

在静态中，您必须将其放在 SVG Html 中；

于 2014-03-28T17:20:57.173 回答