1235364 - Missing SVG mask support for symbols

Status: RESOLVED DUPLICATE of bug 353575

(Core :: SVG, defect)

Description

[Felix]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:43.0) Gecko/20100101 Firefox/43.0
Build ID: 20151221130713

Steps to reproduce:

Take a SVG structure with working masking (), nest it inside a symbol tag, and then use that symbol () and the masking is not working anymore.


Actual results:

The mask is clearly applied in the example SVG structure. With exactly the same structure, used in symbol form, the mask is not applied.


Expected results:

Masking should be applied when code is wrapped in a symbol tag and used with the use tag.

Comment 1

[Felix]

Attachment: Minimal test case of working SVG masking

Comment 2

[Felix]

Attachment: Minimal test case of broken SVG masking in symbol

Comment 3

[Felix]

Sorry for the empty parentheses. I though I'd be able edit in the references later, but there seems to be no editing support.

Comment 4

[Felix]

Also, the relevance of this might be obscure. So to illustrate:

https://github.com/FWeinb/grunt-svgstore
https://github.com/w0rm/gulp-svgstore
https://github.com/jmarquis/broccoli-svgstore

They all produce SVG icon stores that use this architecture of declaring the icons as symbols, loading the store as an external asset, and then using icons from it.

As the use of SVG's for icons is rising (glyphfonts like FontAwesome have always been hacky and are quickly falling out of fashion for SVG icon libraries), we can expect a lot of people running into this issue when they use masking in their icons.