Jump to content
Search Community

DrawSVGPlugin does'nt work

blendingpoint test
Moderator Tag

Go to solution Solved by PointC,

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

  • Solution

Hi blendingpoint  :)

 

Welcome to the GreenSock forums.

 

Looks like the plugin is running into some trouble calculating the path length since you'e setting all your sizes via percentage. If you set a viewBox size and then set the rectangle to that size, it should all work fine. Please keep in mind that you don't have to set the width of an SVG to 100%. It will automatically scale to 100% of the width of its parent unless you tell it otherwise. Also keep in mind that only half the stroke will show with that setup. All strokes are aligned to the middle so a rectangle that is the full width and height of the SVG parent will cut off the outside part of the stroke.

 

Here's a fork of your pen with those changes.

 

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

 

Hopefully that makes sense helps a little bit.

 

Happy tweening and welcome aboard.

  • Like 3
Link to comment
Share on other sites

I didn't know that was being considered. 

 

 

 

Neither did we until blendingpoint informed us of the issue:)

 

Blendingpoint,

 

We made some changes to DrawSVG to accommodate percentage-based width and height.

 

I forked your pen and added the latest beta of DrawSVGPlugin.

 

http://codepen.io/GreenSock/pen/RKWYGZ

 

Please experiment with it and let us know if it works to your liking. 

*the beta version being used will only work in CodePen

  • Like 3
Link to comment
Share on other sites

Hi blendingpoint  :)

 

Welcome to the GreenSock forums.

 

Looks like the plugin is running into some trouble calculating the path length since you'e setting all your sizes via percentage. If you set a viewBox size and then set the rectangle to that size, it should all work fine. Please keep in mind that you don't have to set the width of an SVG to 100%. It will automatically scale to 100% of the width of its parent unless you tell it otherwise. Also keep in mind that only half the stroke will show with that setup. All strokes are aligned to the middle so a rectangle that is the full width and height of the SVG parent will cut off the outside part of the stroke.

 

Here's a fork of your pen with those changes.

 

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

 

Hopefully that makes sense helps a little bit.

 

Happy tweening and welcome aboard.

Thank you! Now I understand the problem and I can fix my code keeping in mind this thing!

Link to comment
Share on other sites

Neither did we until blendingpoint informed us of the issue:)

 

Blendingpoint,

 

We made some changes to DrawSVG to accommodate percentage-based width and height.

 

I forked your pen and added the latest beta of DrawSVGPlugin.

 

See the Pen RKWYGZ by GreenSock (@GreenSock) on CodePen

 

Please experiment with it and let us know if it works to your liking. 

*the beta version being used will only work in CodePen

Super!

I try this beta and it works, unfortunately I can't use it out of codepen and I don't know if this beta version works for my singular case.

Anyway thanks for the very great service!

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