Jump to content
GreenSock

MadG

Vector-Effect: Non-Scaling-Stroke messing with DrawSVG

Recommended Posts

Hey all, 

 

Got kind of a weird one for you today. I'm working on a site with a bunch of offset borders that need to be drawn in from bottom left on scrollTrigger. I want these borders to be 2px regardless of screeen size or SVG scale, so I'm using the vector-effect: non-scaling-stroke property. However, as you can see in the pen, that's causing a funky effect where drawSVG is segmenting the line into 100px segments and drawing them. Anyone know of a different way I can accomplish what I'm trying to do here? Thanks!

See the Pen MWONqVm by kslaton (@kslaton) on CodePen

Link to comment
Share on other sites

Hey @MadG,

 

Instead of lines (seemingly a problem - will be checked) use paths and put the value directly into the path data.

 

See the Pen RwWOKmy?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy drawing ...

Mikel

 

 

  • Like 2
Link to comment
Share on other sites

 

And: If the path is on edge, the SVG set overflow:visible.

 

See the Pen ExbqGVX by mikeK (@mikeK) on CodePen

  • Like 1
Link to comment
Share on other sites

Yeah, I've bumped into that before. I'm not sure why setting the vector effect as a CSS property messes with it like that, but @mikel is right. Adding it as a presentation attribute seems to make it go away. It's not a GSAP thing. You'll see the same problem animating with CSS and setting the property rather than the presentation attribute.

 

You can set the effect with GSAP like this:

gsap.set("line", { attr: { "vector-effect": "non-scaling-stroke" } });

 

See the Pen 465ba9feb6e661c9eb79ac590e2c17ec by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

PS non-scaling strokes can be a little funky in Firefox when resizing. Just an FYI.

  • Like 2
Link to comment
Share on other sites

Awesome, thanks @mikel and @PointC . After looking into it more I may just go with some absolutely positioned spans to create the edges, especially after what you're saying with FF. This is all super helpful though. 

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