外部定义的SVG标记和过滤器在Chrome中不起作用 [英] Externally defined SVG markers and filters not working in Chrome

问题描述

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

I have some SVG filters and markers defined in a separate file for use in my main SVG content.

以下是文件(dependencies.svg)中的示例:

Here is a sample from the file (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中工作:

The following works in firefox when applied to a line:

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

但是它不能在Chrome或Opera中使用.

However it does not work in Chrome or Opera.

当我尝试将过滤器应用于诸如< rect> 元素之类的元素时，情况也是如此.

The same goes for when I try to apply filters to elements such as <rect> elements.

奇怪的是，我可以看到在两种情况下(firefox和webkit)都加载了dependencies.svg文件，但是webkit却不执行任何操作.

The bizarre thing is that I can see my dependencies.svg file being loaded in both cases (firefox and webkit) however webkit does nothing.

我已经将其作为 style 属性以及 filter 和 marker-end 属性的一部分进行了测试.在所有情况下，firefox均有效，Webkit则无效.

I've tested this both as part of the style attribute and the filter and marker-end attributes. In all cases firefox works, Webkit does not.

这是Webkit的已知缺陷吗?还是我缺少真正明显的东西?

Is this a known deficiency of Webkit or am I missing something really obvious?

我想这可能是眨眼问题(我一直说Webkit，是老习惯)

I guess it could be a Blink issue (I kept saying Webkit, old habit)

推荐答案

您显然是对"WebKit"这样的用词习惯:这是2010年的WebKit错误:对未应用外部SVG文档中标记的引用.据说它使其无法固定闪烁.

Apparently you were right with "WebKit" wording habit: it is a WebKit bug from 2010: References to markers in external SVG documents not applied. Supposedly it made it to Blink unfixed.

2012年以来的最新WebKit SVG错误:使外部URL引用起作用，也可以打开.

Most recent WebKit SVG bug from 2012: Make external URL references work, also open.

2012年以来的当前闪烁错误: SVG(过滤器|填充|中风|剪切路径|遮罩|标记-*)未应用的外部文件显示活动，因此可能会在2018年修复(手指交叉).

Current Blink bug from 2012: SVG (filter | fill | stroke | clip-path | mask | marker-*) from external files not applied displays activity so it maybe it could be fixed in 2018 (fingers crossed).

这篇关于外部定义的SVG标记和过滤器在Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！