search

JetBrains / svg-sprite-loader

Webpack loader for creating SVG sprites.
MIT License
2.01k stars 271 forks source link

Firefox doesn't render masks defined inside of `symbol` #325

Closed nicholasrq closed 4 years ago

nicholasrq commented 5 years ago

Firefox has some problems with rendering masks properly. If mask is defined within a symbol it just doesn't work at all in FF, but if you place your mask in defs at the root of the SVG it works like expected

Curren behavior: SVG mask doesn't work if defined inside of symbol

Expected behaivor: SVG mask renders as expected

Desired solution: option to be able to move masks to defs at the root of the SVG sprite

How to reproduce:

This one works fine:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__" class=""><defs><mask id="broken-cursor.full_a" maskUnits="userSpaceOnUse" x="116" y="198" width="372" height="300"><path fill-rule="evenodd" clip-rule="evenodd" d="M220.109 347.528l25.461-17.138 21.813-35.116 32.665-4.338L308 305.345 341 323l-29-22-5.915-17.745 5.604-36.293 54.781 2.938 121.072 103.665-167.718 30.589L192 498l-7.5-155 19.41 9.542L201 370l3 20-9 13 12-13v-20l13.109-22.472z" fill="#fff"></path></mask><mask id="broken-cursor.full_b" maskUnits="userSpaceOnUse" x="-2" y="0" width="333" height="333"><path fill-rule="evenodd" clip-rule="evenodd" d="M228 240l-16-2-17-5 15 5.903L226 243l5.479 5.479-9.203 37.333-26.763 34.187L169 319 74 70.5 312 171l-49.113 14L251 181l-18-1-17-13 12 16 20 5 12.828 6.963 5.575 34.335-31.973 15.295L228 240z" fill="#fff"></path></mask></defs><symbol fill="none" viewBox="0 0 622 531" id="broken-cursor.full"><g fill-rule="evenodd" clip-rule="evenodd" mask="url(#broken-cursor.full_a)"><path d="M192.398 497.157L171.349 80.236l106.739 218.846-85.69 198.075z" fill="#FF0302"></path><path d="M278.088 299.082L171.349 80.236 486.93 353.505l-208.842-54.423z" fill="#FFCC01"></path><path d="M486.93 353.505L319.642 384.28 192.398 497.157l85.69-198.075 208.842 54.423z" fill="#4277CA"></path><path d="M192.398 497.157l85.69-198.075 208.842 54.423-198.372-32.955-96.16 176.607z" fill="#000" fill-opacity=".087"></path></g><g fill-rule="evenodd" clip-rule="evenodd"><path d="M223.24 460.848L74.386 70.836l169.142 175.151-20.288 214.861z" fill="#FF0302"></path><path d="M243.528 245.987L74.386 70.837l384.58 162.374-215.438 12.776z" fill="#FFCC01"></path><path d="M458.966 233.211l-149.591 80.964-86.135 146.673 20.288-214.861 215.438-12.776z" fill="#4277CA"></path><path d="M223.24 460.848l20.288-214.861 215.438-12.776-198.846 29.958-36.88 197.679z" fill="#000" fill-opacity=".087"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M354.731 77.527l25.031 1.564-22.747 65.407-12.166-2.789 9.882-64.182zm90.108 5.428l15.417 23.735-64.943 61.143-9.156-8.842 58.682-76.036zm40.53 87.306l17.581 24.338-88.976 10.914-3.219-12.508 74.614-22.744z" fill="#fff"></path></symbol></svg>

This one fail to render mask:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__" class=""><symbol fill="none" viewBox="0 0 622 531" id="broken-cursor.full"><mask id="broken-cursor.full_a" maskUnits="userSpaceOnUse" x="116" y="198" width="372" height="300"><path fill-rule="evenodd" clip-rule="evenodd" d="M220.109 347.528l25.461-17.138 21.813-35.116 32.665-4.338L308 305.345 341 323l-29-22-5.915-17.745 5.604-36.293 54.781 2.938 121.072 103.665-167.718 30.589L192 498l-7.5-155 19.41 9.542L201 370l3 20-9 13 12-13v-20l13.109-22.472z" fill="#fff"></path></mask><g fill-rule="evenodd" clip-rule="evenodd" mask="url(#broken-cursor.full_a)"><path d="M192.398 497.157L171.349 80.236l106.739 218.846-85.69 198.075z" fill="#FF0302"></path><path d="M278.088 299.082L171.349 80.236 486.93 353.505l-208.842-54.423z" fill="#FFCC01"></path><path d="M486.93 353.505L319.642 384.28 192.398 497.157l85.69-198.075 208.842 54.423z" fill="#4277CA"></path><path d="M192.398 497.157l85.69-198.075 208.842 54.423-198.372-32.955-96.16 176.607z" fill="#000" fill-opacity=".087"></path></g><mask id="broken-cursor.full_b" maskUnits="userSpaceOnUse" x="-2" y="0" width="333" height="333"><path fill-rule="evenodd" clip-rule="evenodd" d="M228 240l-16-2-17-5 15 5.903L226 243l5.479 5.479-9.203 37.333-26.763 34.187L169 319 74 70.5 312 171l-49.113 14L251 181l-18-1-17-13 12 16 20 5 12.828 6.963 5.575 34.335-31.973 15.295L228 240z" fill="#fff"></path></mask><g fill-rule="evenodd" clip-rule="evenodd"><path d="M223.24 460.848L74.386 70.836l169.142 175.151-20.288 214.861z" fill="#FF0302"></path><path d="M243.528 245.987L74.386 70.837l384.58 162.374-215.438 12.776z" fill="#FFCC01"></path><path d="M458.966 233.211l-149.591 80.964-86.135 146.673 20.288-214.861 215.438-12.776z" fill="#4277CA"></path><path d="M223.24 460.848l20.288-214.861 215.438-12.776-198.846 29.958-36.88 197.679z" fill="#000" fill-opacity=".087"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M354.731 77.527l25.031 1.564-22.747 65.407-12.166-2.789 9.882-64.182zm90.108 5.428l15.417 23.735-64.943 61.143-9.156-8.842 58.682-76.036zm40.53 87.306l17.581 24.338-88.976 10.914-3.219-12.508 74.614-22.744z" fill="#fff"></path></symbol></svg>

You can use it as normal:

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="color: rgb(0, 0, 0);"><use xlink:href="#broken-cursor.full"></use></svg>

Please tell us about your environment:

kisenka commented 4 years ago

Fixed in svg-sprite-loader@4.2.0

dvenediktova commented 4 years ago

I'm still facing this issue Firefox 74.0 svg-sprite-loader 4.2.1

kisenka commented 4 years ago

@dvenediktova 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.

dvenediktova commented 4 years ago

@kisenka here is a link to the repo.

kisenka commented 4 years ago

@dvenediktova I'am getting following error: image

dvenediktova commented 4 years ago

@kisenka check again, I fixed an error

dvenediktova commented 4 years ago

@kisenka did you check?

kisenka commented 4 years ago

@dvenediktova fixed in svg-sprite-loader@4.2.7