Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
nick-skriabin opened this issue Oct 29, 2018 · 8 comments · Fixed by CollageLabs/collagelabs.org#127 · May be fixed by navikt/engangsstonad#715
Closed

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

nick-skriabin opened this issue Oct 29, 2018 · 8 comments · Fixed by CollageLabs/collagelabs.org#127 · May be fixed by navikt/engangsstonad#715

Comments

@nick-skriabin
Copy link

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:

  • Node.js version: v8.11.3
  • webpack version: 4.17.2
  • svg-sprite-loader version: 3.9.2
  • OS type & version: macOS Mojave 10.14 (18A391)
@escaton escaton mentioned this issue Jun 20, 2019
Merged
kisenka added a commit that referenced this issue Jan 24, 2020
@kisenka
feat: add clipPath & mask to "move-from-symbol-to-root" transform def…
02d0c33 
…aults

Closes: #288, #325
@kisenka
Copy link
Contributor

kisenka commented Jan 24, 2020

Fixed in svg-sprite-loader@4.2.0

@kisenka kisenka closed this as completed Jan 24, 2020
@dvenediktova
Copy link

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

@kisenka
Copy link
Contributor

kisenka commented Apr 6, 2020

@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
Copy link

@kisenka here is a link to the repo.

@kisenka
Copy link
Contributor

kisenka commented Apr 12, 2020

@dvenediktova I'am getting following error:
image

@dvenediktova
Copy link

@kisenka check again, I fixed an error

@dvenediktova
Copy link

@kisenka did you check?

kisenka added a commit that referenced this issue Apr 28, 2020
@kisenka
fix: move mask & clipPath elements outside symbol
ae70786 
Closes: #325
@kisenka
Copy link
Contributor

kisenka commented Apr 28, 2020

@dvenediktova fixed in svg-sprite-loader@4.2.7

@snyk-bot snyk-bot mentioned this issue May 5, 2020
Merged
@dependabot dependabot bot mentioned this issue Mar 15, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
3 participants
@nick-skriabin @kisenka @dvenediktova