html - SVG filter in external file not being applied

Question

In a file named gray.svg in my assets directory I have

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

And in my html I have

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <image filter="url(assets/gray.svg#grayscale)"xlink:href="assets/images/linux.png" x="0" y="0" width="100%" height="100%"></image>
</svg>

I know that assets/gray.svg#grayscale exists because when I go into the inspector and click the link it takes me to an actual page with the svg defined in gray.svg.

Moreover if I don't have an external .svg file, and I just put the filter at the top of my body and change the filter in the svg image to just #grayscale it works.

I have no idea why it's not working. Could somebody help me out?

Plunker

Answer 1

Looks like you've discovered this bug in Chromium:

Issue 109212: SVG (filter | fill | stroke | clip-path | mask) from external files not applied

What steps will reproduce the problem?

1. Define a filter in an SVG file, assign it an ID.
2. Embed some SVG in an HTML file.
3. Use the CSS directive "filter: url(file#id)" to reference the filter in the SVG file.

What is the expected result? The filter should be applied.

What happens instead? No filter is applied.

Your example works correctly in Firefox.