Jump to content
GreenSock

romain.gr

DrawSvg with non-scaling-stroke on path and preserveAspectRatio="none", path length wrong

Recommended Posts

Hi, I've trying to achieve something and I'have read plenty of gsap forum threads on the subject without finding the solution.

 

On the codepen you can see that some words are surrounded by a svg path stroke, I'm trying to animate that line, like a line drawn by a pen around a word. But it looks like the path length is not correctly calculated by GSAP (?), I first thought about a browser inconsistency (as read in other threads), but it's doing the same on all browsers. The problem is fixed by removing preserveAspectRatio="none" on the svg element, but obviously it's not what I try to do. You can see the end line is drawn at the same time as the start line.

 

Not really sure if it's doable as I really checked all around the forum, if someone has another way to achieve this and keeping the flexibility of resizing the path to the word width and height.

 

Thank you

See the Pen BaJLrPv by pen (@pen) on CodePen

Link to comment
Share on other sites

It probably has to do with how you drawn the original shape. I've just drawn a similar shape in Figma using the pencil tool and exported it as an SVG with a simple drawSVG animation and it works as expected. 

 

See the Pen gOoLGQg by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi @mvaneijgen, thanks for you answer, but your example is missing a few things.

 

1. I'm using illustrator with the pen, the d attribute of the path looks pretty much the same as yours.

2. you remove everything in your example, the shape needs to surround some text, and adapt itself to the word it surrounds.

3. the vector-effect="non-scaling-stroke" and preserveAspectRatio="none" are missing from the path and the svg element, and for sure those attributes are causing the miscalculation of the path length.

 

I quickly remade your example to include all those parameters and I have the same issue, without changing your path:

 

See the Pen jOYVaOp by romaingranai (@romaingranai) on CodePen

 

Thank you ;)

 

 

  • Like 1
Link to comment
Share on other sites

That is indeed really weird. It seems that `vector-effect="non-scaling-stroke"` is the issue. 

 

See the Pen GRyNOMy by mvaneijgen (@mvaneijgen) on CodePen

 

I've never worked with that property, but probably someone here will point to why that is.

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect

 

Did some more testing, again I have no idea what vector-effect="non-scaling-stroke" does, but removing it and increasing the stroke-width makes it almost the same without the issue

 

See the Pen YzYpEex by mvaneijgen (@mvaneijgen) on CodePen

 

Link to comment
Share on other sites

Hey @mvaneijgen, it's used to "scale" the path, if you scale it without vector-effect="non-scaling-stroke", the path will look squashed, by using it it resize the path but not the stroke (the first codepen has been updated, 2 exact same path). That way it would be super flexible and I could create, let say 20 different paths (using the same logic : a 100/100 svg parent, thus the path points are expressed in %, that way the path could adapts to any word length, that actually works if the path is not animated, + it's responsive). But more I think about it and more I'm wondering how can the stroke 'thickness' can affect the length of the path.

Link to comment
Share on other sites

There's actually a warning in the console!

 

'Warning: <path> length cannot be measured when vector-effect is non-scaling-stroke and the element isn't proportionally scaled.'

It's the mixture between non scaling stroke and the fact that the SVG isn't proportionally scaled (preserveAspectRatio none) that's the issue.

 

Here's a way around it by using a bit of pythagorus and just tapping into the offset itself. It'll need to be recalculated on resize though, or at least right before the tween plays to make sure it's correct.

See the Pen eYyBVZM?editors=1011 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

🤔 wait maybe not. 

incoming...

Link to comment
Share on other sites

Hi @Cassie, I actually stumble across that thread on stack overflow during my researches, tried to integrate the solution to my case, without success.

 

Thank you for trying ;).

  • Like 1
Link to comment
Share on other sites

Well that warning is the plugin for a reason, but you can always make stuff dynamically. Just an old pen of mine that will find and circle a word.

 

See the Pen LzzjLw by osublake (@osublake) on CodePen

 

  • Like 5
Link to comment
Share on other sites

3 hours ago, Cassie said:

I'm out ¯\_(ツ)_/¯

You had an inadvertent distress signal there I believe you wanted @PointC🔦 😄

 

SVG.png.cb0576ccb4fb0ae1fb5f155c04737bd2.png

  • Haha 3
Link to comment
Share on other sites

I'm with Blake! I'd also go generative to get around this!

Link to comment
Share on other sites

 Thank you for all your answers, @OSUblake, I had a quick look at your pen, it works very well for your used case, when only a word is selected, when the 'circle' stay always almost the same (i mean, not too spread, cause obviously without the vector-effect="non-scaling-stroke" the path stroke width is bigger on the edges) and I might use your example for similar kind of work. But I might have an idea, I could create multiple paths, all having a different width, and call them depending on how many words my span contains, let say that I create 10 different path in Illustrator from small to wide, and insert them in the dom based on the number of letter contains in a span. That might be the solution, cause I want to keep some king of flexibility (giving the client the possibility to surround any word in a sentence in the back-end administration) that vector-effect="non-scaling-stroke" gave me but obviously without the down side of that technique. I'll post the result here when I'm working on it again. 

 

Obviously I did not ignore the warning in the console, I was just wondering if, somehow, it was possible to (re)calculate the length of that path manually by dark mathematic functions, as suggested by @Cassie

 

Thank you for your help and directions.

  • Like 1
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.
×