Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
biuro

SVG (filter and mask) with IE Edge problem

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

Hello,

Thank You for help - working like a charm.

Why is that it has to be wrrapped in <g> ? 

 

Have a nice day
Lukasz

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

Thanks for the tip :)

Hava a nice day.

Lukasz

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.
×