Question

我在一个单独的文件中定义了一些SVG过滤器和标记，以便在我的主要SVG内容中使用。

以下是文件（dependencies.svg）中的示例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.6666 0.3333 0.3333 0 0 0.3333 0.6666 0.3333 0 0 0.3333 0.3333 0.6666 0 0 0 0 0 1 0"></feColorMatrix>
    </filter>

    <marker id="Output" viewBox="0 -6 12 11" refX="10" markerHeight="8" markerWidth="8" orient="auto">
        <path d="M0,-5L10,0L0,5L0,-5" stroke-width="1px" markerWidth="8" markerHeight="8" stroke="#696969" style="fill: rgb(105, 105, 105);"></path>
    </marker>

以下在应用于某行时在firefox中有效：

marker-end: url("/path/to/dependencies.svg#Output");

然而，它无法在Chrome或Opera中使用。

当我尝试将过滤器应用于<rect>元素等元素时也是如此。

奇怪的是，我可以看到我的dependencies.svg文件在两种情况下都被加载（firefox和webkit），但webkit什么都不做。

我已将此作为style属性以及filter和marker-end属性的一部分进行了测试。在所有情况下firefox工作，Webkit没有。

这是Webkit的已知缺陷还是我遗漏了一些非常明显的东西？

编辑：我想这可能是一个Blink问题（我一直在说Webkit，旧习惯）

Answer 1

显然你对＃34; WebKit＆＃34;措辞习惯：这是2010年的WebKit漏洞： References to markers in external SVG documents not applied。据说它使它闪烁不固定。

2012年最新的WebKit SVG错误：Make external URL references work，也是开放的。

外部定义的SVG标记和过滤器无法在Chrome中使用

1 个答案: