Closed donpinkus closed 10 years ago
It works on your example. Although maybe not as expected.
Simply add attributes stroke-width="3" stroke="#ff0000"
to the path
element to see the animation. You might want to increase duration as well (example).
I would suggest to split the path (example) since walkway uses total length of the path. This way though you need to set fill
attributes explicitly (in callback to draw()
?).
See my commit history for more info.
Great answer @jzjzjzj, thanks for getting here before I did. @donpinkus, here is the sass styles for the demo on my website.
svg {
path, line {
stroke: #fff;
stroke-width: 2px;
}
path {
fill: transparent;
}
}
I think exporting from illustrator and thinking this is a bug may become common enough that I should add some information in the README about it. I'll do it later today.
Just to demonstrate http://codepen.io/connoratherton/pen/ByBJxL
Problem with this splitting approach is we lose transparency on intersections of the compound path. Probably could be partially solved by using masks, but that would be completely different beast of SVG. And automating the splitting (if even possible) imho is out of the walkways scope.
Wow, thanks for the quick and thorough response guys!
It looks awesome after splitting the path.
Out of curiosity, how did you know where to split my path? I only have a bit of experience with SVG, mostly from D3. From looking at the path coordinates, I don't see obvious places where it's an inside path.
Also why the stroke-dasharray: 96.0715713500977px, 96.0715713500977px; stroke-dashoffset: 0px;
line?
@donpinkus Where do you see stroke-dasharray: 96.0715713500977px, 96.0715713500977px; stroke-dashoffset: 0px;
? You don't have to worry about it, those attributes are added and managed by the script.
Regards splitting - I have (had) no experience with SVG before reading your issue, but it is very suspicious that path of initial three examples starts with M
and ends with z
while containing neither of them inbetween. Except your example. Had to try splitting between z
and M
. :) My guess is that there should be a way of making a path to be not compound in Illustrator.
Anyway - more info.
Again, thanks @jzjzjzj, the link to the doc is fantastic. I'll close this in the next few hours.
Walkway looks amazing, is it supposed to work on any SVG path or shape?
When I call draw on a path I exported from Illustrator, the SVG does not draw but just appears immediately. The callback to draw() is still successfully called however.
I added the below path to example/index.html. All other shapes do the "walkway" correctly, but this path just appears immediately.
and the code I added to the JS: