DrawSVG Stoke Alignment

[WA007]

Hi all-

 

I've been wondering if stroke:alignment is support in DrawSVG?

 

Has anyone come across anything that could be a workaround or is this supported? It could help me out with a simple text and complex path animations I'm trying to accomplish. This is mainly for things like text where I would want to have the stroke be inner so the font doesn't look so think even at a 1px stroke.

 

I have included a pen for reference. Any help would be much appreciated! 

See the Pen jqQZgx by wa007 (@wa007) on CodePen

[PointC]

Hi WA007 

 

Welcome to the forums.

 

I like that animation - very nice. To my knowledge, this isn't a limitation of the drawSVG plugin, but rather SVG itself. Right now, we get center aligned strokes on everything. Support for inner and outer alignment is coming, but there are some things that need to be figured out first. Here's a bit of info about that:

 

https://www.w3.org/TR/svg-strokes/#SpecifyingStrokeAlignment

 

As far as a workaround now, maybe two copies of the path with the stroked version slightly smaller than the filled version so it appears that the stroke is aligned inner? Others may jump in with additional ideas, but that's the first thing that comes to mind for me.

 

Happy tweening and welcome aboard.

 

[WA007]

Hi PointC

 

Thanks for the quick reply, same thing I found from the research I did

 

Your workaround is the direction I was leaning towards and would work for certain scenarios. 

 

Thanks again!