html - 外部定义的 SVG 标记和过滤器在 Chrome 中不起作用

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

显然你对“WebKit”的措辞习惯是正确的:这是一个 2010 年的 WebKit 错误: References to markers in external SVG documents not applied .据说它使它变成了不固定的 Blink。

2012 年的最新 WebKit SVG 错误:Make external URL references work , 也打开了。

2012 年的当前 Blink 错误:SVG (filter | fill | stroke | clip-path | mask | marker-*) from external files not applied显示事件，因此它可能会在 2018 年得到修复(祈祷)。