In a file named gray.svg
in my assets directory I have
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?
- Define a filter in an SVG file, assign it an ID.
- Embed some SVG in an HTML file.
- 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.