Jump to content
Search Community

SVG (filter and mask) with IE Edge problem

biuro test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

I would appreciate help as I cannot find the solution, just a hint or point a topic.

I made a simple animation of SVG with mask and filter, the problem is as it is displayed ok with Opera, FF,  Chrome, but not IE Edge. I tried to find the problem but had no luck. I also noticed that if change the values in IE console the effect is the same mask with text is misplaced.

Thank You for help in advance.
Lukasz

edge-gsap-problem.jpg

See the Pen eLpRJG by Luqpa (@Luqpa) on CodePen

Link to comment
Share on other sites

Hi @biuro :)

 

Welcome to the forum.

 

Please try wrapping your clipped text in a <g> tag and clipping the group.

<g clip-path="url(#masktext)">
  <text id="svgTextFilter" class="svgText" x="15" y="55" textLength="150" lengthAdjust="spacingAndGlyphs" >GreenSock</text>
</g>

 

See the Pen NLGgmv by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

I'm never absolutely certain about the 'Why?' of browser behavior. ?

 

It's just been my experience that you'll encounter far fewer problems with SVG masks and clip-paths if you wrap them in a group and apply the clip/mask to the <g>. Even if I have one element to mask/clip, I always group it.

 

Happy tweening.

:)

  

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...