Jump to content
Search Community

Unwanted thin border using MorphSVG

wcomp 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 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:

 

 

unwanted border.png

See the Pen aPOZGo?editors=1100 by Wcomp (@Wcomp) on CodePen

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

 

See the Pen oJXYGQ?editors=1100 by jonathan (@jonathan) on CodePen

 

Does that help?

 

SVG resources:

https://greensock.com/svg-tips

 

Happy Tweening! :)

  • Like 5
Link to comment
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.

 

See the Pen oJXYGQ?editors=1100 by jonathan (@jonathan) on CodePen

 

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