CODEWITHSUNDEEP
htmlcsssvgwebkit
Tsarbomb
Tsarbomb

Reputation: 19

Externally defined SVG markers and filters not working in Chrome

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

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>

The following works in firefox when applied to a line:

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

However it does not work in Chrome or Opera.

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

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

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.

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

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

Upvotes: 2

Views: 947

Answers (1)

myf
myf

Reputation: 11293

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.

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

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).

Upvotes: 2

Related Questions