Not drawing out an SVG path about walkway

[ConnorAtherton]

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.

[jzjzjzj]

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.

[ConnorAtherton]

Just to demonstrate http://codepen.io/connoratherton/pen/ByBJxL

[jzjzjzj]

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.

[donpinkus]

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?

[jzjzjzj]

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

[ConnorAtherton]

Again, thanks @jzjzjzj, the link to the doc is fantastic. I'll close this in the next few hours.