non-scaling-stroke and DrawSVG

[KoentjeV 1 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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!

 

[GreenSock 8,117 Likes (Superhero)]

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. 

[Jonathan 5,176 Likes (Superhero)]

Works Perfect Jack .. here is the pen with the updated fix you made

 

See the Pen ZOPBLR by jonathan (@jonathan) on CodePen

 

Thanks Jack!

[KoentjeV 1 Likes (Newbie)]

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

[KoentjeV 1 Likes (Newbie)]

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?

[GreenSock 8,117 Likes (Superhero)]

Yep, it's updated in the official zip downloads for members. Enjoy!

[jgray 1 Likes (Newbie)]

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

[GreenSock 8,117 Likes (Superhero)]

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  

[jgray 1 Likes (Newbie)]

Thank you for addressing it so quickly, that's looking great! I'm already talking with my client to sign them up, all the more reason now. Thanks again!

[GreenSock 8,117 Likes (Superhero)]

Just so you know, this is in the official release now (part of the GSAP 2.0.2 push). Enjoy!