wcomp

Unwanted thin border using MorphSVG

Recommended Posts

Hello all! I love the GSAP very much and am most likely about to purchase a membership so I can use MorphSVG in my projects. However, as I was playing around with the plugin in codepen, I noticed this odd border around the outside of the SVG shape I'm morphing. What is causing this? I tried setting the stroke-width to zero and that did not work. I deleted the stroke-with property all together and that seemed to work but I lost my opacity settings.  Anyone know what might be causing this issue? Thanks! 

 

codepen: https://codepen.io/Wcomp/pen/aPOZGo?editors=1100

 

 

unwanted border.png

Share this post


Link to post
Share on other sites

Hello @wcomp and welcome to the GreenSock Forum!

 

It looks like this is happening due to something in your SVG Markup. I could only see this in Chrome, but not in Firefox on Windows 10.

 

I took your SVG code and pasted it inside a free online SVG Optimizer Clean Up tool.

 

https://jakearchibald.github.io/svgomg/

 

I made sure i toggled off Clean Id's so it kept your ID attributes on your <g> tags inside your SVG.

 

So now when testing in a webkit browser you do not see the border shenanigans  after animating. The border was being caused by some coordinates that were causing an overflow of your path. But that online tool cleans it up ;) now

 

You can see in this below codepen that it no longer has that red border on the outside parts of the SVG.

 

 

Does that help?

 

SVG resources:

https://greensock.com/svg-tips

 

Happy Tweening! :)

  • Like 5

Share this post


Link to post
Share on other sites
18 minutes ago, Jonathan said:

Hello @wcomp and welcome to the GreenSock Forum!

 

It looks like this is happening due to the something in the SVG Markup. I could only see this in Chrome, but not Firefox on Windows 10.

 

I took your SVG code and pasted it inside a free online SVG Optimizer Clean Up tool.

 

https://jakearchibald.github.io/svgomg/

 

I made sure i toggled off Clean Id's so it kept your ID attributes on your <g> tags inside your SVG.

 

You can see below when tested in a webkit browser that you do not see the border after animating. The border was being caused by some coordinates that were causing an overflow of your path.

 

You can see in this below codepen that it no longer has that red border on the outside parts of the SVG.

 

 

Does that help?

 

SVG resources:

https://greensock.com/svg-tips

 

 

Happy Tweening! :)

 

 

 

Yes! That does help. Thanks a bunch. I'm glad I know about that SVG Optimizer Clean Up Tool now. I'm using Inkscape and even when I save as an "Optimized SVG" there seems to be a lot of transforms going on that I don't yet fully understand. I figured the issue had something to do with the SVG code but that tool cleaned it right up. Thanks again!

  • Like 2

Share this post


Link to post
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.