css - 来自不同 svg 文件的引用过滤器

Question

如何引用在不同文件中定义的过滤器？例如，文件夹 assets 中有一个 filter.svg，它具有:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
</svg>

现在在另一个文件中，我在另一个 svg 元素中绘制了一些形状。如何应用此渐变滤镜？只需:fill="url(assets/filter.svg#gradient)"？因为看起来它没有接受定义。

Answer 1

如评论中所述，Chrome(仍然!)不支持引用外部文件中定义的滤镜、填充、描边、剪辑路径、 mask 或标记，就像 Chrome v45 一样。

参见 this bug report似乎正在跟踪这个问题。

好像还有webkit bugs关于这一点，所以虽然我自己没有测试过，但我认为其他基于 webkit 的浏览器也可能有这个限制。