huge stroke-dasharray value w drawSVGplugin

[flowen 13 Likes (Newbie)]

Inspect the codepen preview window to see the values on the svg. 

 

I've tried exporting from Illustrator and from Figma (using SVOMG), but no difference in the result.

 

 

Anyone an idea how to fix this?

 

 

the values:

 

element.style {

stroke-dashoffset: -1;

stroke-dasharray: 1e-05px, 11px;

}

 

 

 

 

See the Pen vbMZRQ?editors=1111 by flowen (@flowen) on CodePen

[Shaun Gorneau 1,503 Likes (Superhero)]

Hi @flowen ... I'm not seeing much of anything in the results of your pen, so I'm not sure what to look for.

 

But I do see a few issues off the bat. Your DrawSVG tweens are calling the SVG directly, but draw SVG expects a path, rect, ellipse, line, polyline, or polygon.

 

Also, I'm sure how well this will play with xlink to the symbol path. Any way you can do this with one SVG alone?

 

[flowen 13 Likes (Newbie)]

hi @Shaun Gorneau thanks for your reply. 

 

The reason I use definitions is because I want to use the letters more often.. I could do without, but would prefer to make this work. 

 

I see.. I made a rooky mistake ? alright, I adjusted it to the path, but it's still not drawing it. I also simplified the example a bit. 

 

 

in the edited codepen I still see 

stroke-dashoffset: -2476.59; stroke-dasharray: 1e-05px, 2486.59px;

 

(use the inspector and check the path of the svg)

 

I'm not sure if stroke-dasharray is supposed to have such values or it's a bit strange. 

 

[PointC 8,599 Likes (Superhero)]

Your path is actually a bunch of segments which is messing up the DrawSVG plugin. Here's a fork of your pen with some changes to the path d attribute.

 

See the Pen jdRvmm by PointC (@PointC) on CodePen

Hopefully that helps a bit. Happy tweening.

 

[flowen 13 Likes (Newbie)]

hi @PointC thanks for fixing this! I wonder how you fixed this, because I want to do this for a bunch of letters

[PointC 8,599 Likes (Superhero)]

You had a filled path (made up of multiple segments) in your demo so I pulled it into Adobe Illustrator and used the pathfinder tool to unite everything into one path. I then added a stroke followed by outlining the stroke and exporting a new SVG. If you start with a filled path (even though it looks like a stroke) and then add a stroke, you'll get a stroke on each side of that path which is probably not what you're going for here.

 

The easiest way to get your desired result would be:

• Create the letter as you like and set the fill to none and stroke to any color. 
• Create outlines from the letter(s) (right click and 'create outlines' or Shift+Ctrl+O)
• Export the SVG

You may also want to add a background rectangle so you don't get unexpected sizes and coordinates. I wrote about that here:

I also have a thread about exporting from AI which you may find helpful.

The other thing you'll need to decide is how to handle letters with a closed counter. You can export the SVG path as one compound path so the main outline and the bowl (stroke that makes up the hole in the letter) animate at the same time. You can also animate them separately. If you want to do the latter, you need to release the compound path after creating outlines and then create a new compound path for each piece. Object --> Compound Path --> Make. In this example you can see that the first A is one path and the second is two separate paths.

 

See the Pen MLdrgb by PointC (@PointC) on CodePen

 

The other thing you may want to change is the start point of the stroke(s). That too is easily done in AI before you export. I wrote a whole post about it here:

Hopefully that helps. Happy tweening.

 

[GreenSock 8,117 Likes (Superhero)]

Wow, golden nuggets of wisdom, @PointC. Thanks for taking the time to write that up. 

[PointC 8,599 Likes (Superhero)]

I have to make up some ground after my hiatus. 

 

If I don't pull my weight around here, @Carl may show up at my house and repo my Moderator Badge. 

[GreenSock 8,117 Likes (Superhero)]

5 minutes ago, PointC said:

If I don't pull my weight around here, @Carl may show up at my house and repo my Moderator Badge. 

 

 @Carl called off Vinnie and his thugs now that you're back.

[flowen 13 Likes (Newbie)]

@PointC This IS Amazing! Thanks so much for the extra effort of explaining! I should've inspected the path a bit more closely and I would've recognised the fills and double paths. Your other sources are amazing extra help

 

This shows me how illustrator outshines Figma (with figma I have to do a lot of manual work). 

 

and thanks @Carl for putting some of that pressure ✌?;)