Svg-sprite-loader: Icons with masks are displayed as if without masks

[0pt1m1z3r]

Do you want to request a feature, report a bug or ask a question?
Bug

What is the current behavior?
Icons with masks are displayed as if without masks

What is the expected behavior?
Masks must be applied correctly

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.
The best way is to create repo with minimal setup to demonstrate a problem (package.json, webpack config and your code).
It you don't want to create a repository - create a gist with multiple files
https://github.com/0pt1m1z3r/svg-test

If this is a feature request, what is motivation or use case for changing the behavior?

Please tell us about your environment:

• Node.js version: 8.11.3
• webpack version: 3.12.0
• svg-sprite-loader version: master branch (because 3.9.0 is not published)
• OS type & version: macOS 10.13.5 (17F77)

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
In Chrome 67.0.3396.87:
Source svg icon - correct
Svg icon from sprite - correct
Svg icon from sprite in img tag - correct
Svg icon from sprite in use tag - incorrect
In Firefox 60.0.2:
Source svg icon - correct
Svg icon from sprite - incorrect
Svg icon from sprite in img tag - incorrect
Svg icon from sprite in use tag - incorrect

[porfirioribeiro]

Was about to report the same problem with filters and gradients.

I guess it's because how svg links those def's using #links
Dunno if there is a way to generate the sprite in a way to make the links correct :disappointed:

[0pt1m1z3r]

@kisenka can you help?

[kisenka]

@0pt1m1z3r could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

[0pt1m1z3r]

@kisenka https://github.com/0pt1m1z3r/svg-test

[0pt1m1z3r]

@kisenka can you help?

[kisenka]

I it'a browsers issue, how they render external SVGs in sprite stack. If you guys tell me how to transform an SVG to get it work - I'll be glad to update sprite generator. The only thing I can suggest is to use SVG sprite inlined directly on the page. I've created a PR https://github.com/0pt1m1z3r/svg-test/pull/1 to demonstrate how it can be done.

[kisenka]

@0pt1m1z3r BTW if refer to SVGs from CSS all works fine :)

[0pt1m1z3r]

Thank you. I will continue to investigate this problem

[kisenka]

@0pt1m1z3r can I close this one?

[0pt1m1z3r]

@kisenka Yes, you can. I use the solution via css.

[invernizzi]

Hi there, just chiming in to help future readers of this bug.

If you need to load a sprite via a <use> tag in Firefox and you see weird behavior with <mask>s and clip paths like the one shown in the first comment, it's because of this Firefox "oddity".
https://bugzilla.mozilla.org/show_bug.cgi?id=353575

You can fix that by running something like this after loading the sprite:

   document
        .querySelectorAll('#__SVG_SPRITE_NODE__ symbol mask')
        .forEach(element =>
          document.querySelector('#__SVG_SPRITE_NODE__').appendChild(element)

This workarounds moves <mask> elements from inside the symbol to the root of the sprite node, allowing Firefox to load them. Watch out for potential id conflicts (ideally, there shouldn't be, as this loader prefixes ids automatically).

[kisenka]

Fixed in [email protected]