Jump to content
Search Community

non-scaling-stroke and DrawSVG

KoentjeV test
Moderator Tag

Go to solution Solved by GreenSock,

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

Dear gsap friends,
I've been experimenting with DrawSVG plugin.

It seems that setting vector-effect="non-scaling-stroke" to a polygon makes the DrawSVG plugin go crazy.

A simple animation from 0% - 100% works without the vector-effect set. Setting the attribute makes the animation go wild :)

Any thoughts on this?

See the Pen wWOrNr?editors=1111 by KoentjeV (@KoentjeV) on CodePen

Link to comment
Share on other sites

Hello KoentjeV, and Welcome to the GreenSock Forum!

 

Sorry your having trouble! Thank you for the codepen ;)

  • What browser and browser version do you see this in?
  • What OS or OS version you do you see this on?

For anyone interested, from what i see regarding the vector-effect attribute documented here:

 

https://www.w3.org/TR/SVGTiny12/painting.html#VectorEffectProperty

 

It states the following about this property

  • non-scaling-stroke
    Modifies the way an object is stroked. Normally stroking involves calculating stroke outline of the shape's path in current user space and filling that outline with the stroke paint (color or gradient). With the non-scaling-stroke vector effect, stroke outline shall be calculated in the "host" coordinate space instead of user coordinate space. More precisely: a user agent establishes a host coordinate space which in SVG Tiny 1.2 is always the same as "screen coordinate space". The stroke outline is calculated in the following manner: first, the shape's path is transformed into the host coordinate space. Stroke outline is calculated in the host coordinate space. The resulting outline is transformed back to the user coordinate system. (Stroke outline is always filled with stroke paint in the current user space). The resulting visual effect of this modification is that stroke width is not dependant on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.

It might have to do the way this attribute calculates the coordinates using "host"  coordinate space instead of the user coordinate space, please standby while we look into this for you.

 

Thank you for any additional information!

 

:)

  • Like 2
Link to comment
Share on other sites

  • Solution

Ah, very interesting. Yes, it looks like that effect basically forces the length of the shape/line to be calculated at the screen level (after scaling) rather than on the raw/native shape itself. I took a crack at applying the math to adjust the length accordingly in DrawSVGPlugin and you can test it on codepen using https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js. Better? Once you confirm it's working the way you'd expect, I can drop it into the official bonus zip that you can download and use on your own site(s). 

 

Thanks for letting us know about this. 

  • Like 4
Link to comment
Share on other sites

Ah, very interesting. Yes, it looks like that effect basically forces the length of the shape/line to be calculated at the screen level (after scaling) rather than on the raw/native shape itself. I took a crack at applying the math to adjust the length accordingly in DrawSVGPlugin and you can test it on codepen using https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js. Better? Once you confirm it's working the way you'd expect, I can drop it into the official bonus zip that you can download and use on your own site(s). 

 

Thanks for letting us know about this. 

Thanks for the responses and fix guys!

Great work!! 

  • Like 1
Link to comment
Share on other sites

Ah, very interesting. Yes, it looks like that effect basically forces the length of the shape/line to be calculated at the screen level (after scaling) rather than on the raw/native shape itself. I took a crack at applying the math to adjust the length accordingly in DrawSVGPlugin and you can test it on codepen using https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js. Better? Once you confirm it's working the way you'd expect, I can drop it into the official bonus zip that you can download and use on your own site(s). 

 

Thanks for letting us know about this. 

So will you update the plugin or should I overwrite the drawSVGPlugin with your solution?

Link to comment
Share on other sites

  • 1 year later...

Hello,

 

I am experiencing this issue as well with trying to use vector-effect="non-scaling-stroke" in combination with the DrawSVG plugin on a circle element and causing crazy behavior. I've created a codepen that links to the DrawSVGPlugin referenced above highlighting the two outcomes with/without the non-scaling-stroke attribute. Is this the same issue or something else?

 

See the Pen mjBbaO by ventinus (@ventinus) on CodePen

Link to comment
Share on other sites

Interesting - that's actually due to the fact that it was rotated when the measurements were taken (non-scaling-strokes have a bunch of weird browser issues). Thanks for pointing that out. I believe I've got a fix in place for the trial version of DrawSVGPlugin - just clear your cache and you should see what I mean. Better? Once I get confirmation, I can drop it into the official downloads for all Club GreenSock members. Looks like you haven't signed up yet - maybe this will make it worthwhile ;) 

  • Like 4
Link to comment
Share on other sites

  • 5 weeks later...

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