Hey guys,
I have an SVG icon that I want to use on a page as a <symbol> that has a <mask> and <filter> applied to it.
When I embed the SVG inline and use it like so, there are no issues…
<svg class = 'svg-icon' fill = "none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<use href="#example" xlink:href = "#example" />
</svg>
<svg fill = "none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id = "example" viewBox="0 0 84.062 84.062" >
-------------------- path, path, mask, filter----------------
</symbol>
<svg>
When I shift the svg with <symbol> to another file symbols.svg and reference it like this…
<svg class = 'svg-icon' fill = "none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<use href="./symbols.svg#example" xlink:href = "./symbols.svg#example" />
</svg>
It “imports” the svg without the <mask> applied…
There is absolutely no difference between the XML applied inline and in the file… only the location…
TBH I dont often used <mask>… and there are no issues with the <filter> (drop shadow)…
Does anybody have any idea why this occurring?.. 