外部样式表中带有 fill:url(#id) 样式的 Firefox SVG，内联样式很好

Posted 2023-02-25

技术标签:

【中文标题】外部样式表中带有 fill:url(#id) 样式的 Firefox SVG，内联样式很好【英文标题】：Firefox SVG with fill:url(#id) style in external stylesheet broken, inline styles are fine 【发布时间】：2013-04-05 19:42:00 【问题描述】：

仅在 Firefox 中，如果我尝试为 svg 路径提供模式引用，例如：

路径填充：网址（#ref）；

在外部样式表中，它呈现为不可见。如果我内联或在页面上的标签中执行此操作，则它可以工作。

这是我的小提琴，这是我的代码转储，因为 SO 不会让我只发布小提琴。 http://jsfiddle.net/v5VDp/1/

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

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

    </pattern>
</defs>
</svg>

.slice:nth-child(6n + 2) 路径填充：网址（#texture1）；

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

【问题讨论】：

【参考方案1】：

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

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

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

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

【讨论】：

那么如何在外部样式表中引用当前的dom呢？这似乎很反直觉这是 CSS 样式表的规则。我猜他们并没有真正考虑到 SVG 用例。我看到你评论了很多围绕这个案例提交的 firefox 错误......我知道样式表规范说你应该如何引用 url，但你基本上是在强迫我把我可能在页面上内联的任何 svg 样式......似乎 Chrome/webkit 做出的妥协是合乎逻辑的。或者至少给我一个强制它的选项【参考方案2】：

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