外部定义的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屋!