question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Illustrator SVG > Polyline > Wont animate

See original GitHub issue

Hello, sorry for the disturbance, but despite a lot of attempts from me in both editing the html and the svg itself, I can’t seem to make the animation to work. It just appears instantly.

Here is my code:

For SVG:

<svg version="1.1" id="logo" class="polyion" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="600px" height="400px" viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;"
     xml:space="preserve">
     <style>
     #logo>polyline
     {
        fill:white;
        stroke:black;
     }
     </style>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="108.9,14.1 305.8,87.7 256.3,198.7 136.1,48.2 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="113.7,385.3 128.1,317.6 158.6,358.5 118.9,382.2 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="128.1,317.6 208,385.9 223.7,307.1 136.1,316.7 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="208,385.9 305.8,87.7 385.6,253 217.9,378.5 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="358.5,160.8 385.6,253 421.1,127.3 366.3,156.6 "/>
<polyline stroke-width="3" stroke="#ff0000" class="st0" points="421.1,127.3 416,185.9 502.8,157.1 425.1,128.8 "/>
</svg>

For JS:

<script src="http://cdn.jsdelivr.net/walkway/0.0.1/walkway.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var svg = new Walkway({ 
      selector: '#logo',
      duration: '4000',
    });

    svg.draw();
});
</script>

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
ConnorAthertoncommented, Apr 18, 2016

Thanks @wjramos

1reaction
wjramoscommented, Apr 18, 2016

@dennisjerdz – You aren’t importing Walkway in that pen (evident from the browser console, stating Walkway is undefined), well it looks like you were trying to – but your script include was after the closing </body> tag which is invalid

See my fork that includes the library: http://codepen.io/wjramos/pen/eZrLOj

Read more comments on GitHub >

github_iconTop Results From Across the Web

Work with SVG files in Animate - Adobe Support
Use this guide to work with SVG files in Animate. ... Animate enables interchanging of content with Adobe Illustrator.
Read more >
Three Illustrator tricks for better SVG stroke animations
The code you use to animate the the stroke appearing doesn't change the actual points in the shape itself. Which is why the...
Read more >
How to create an SVG path reveal animation in Illustrator
Go to object, clipping path and then make. You should now be able to fill in the object with the stroke. Step 4:...
Read more >
How to Prepare Your SVG in Illustrator? | SVGator Help
Rename your shapes, paths, and groups in the layer panel. Delete unnecessary paths and groups. Go to Export as and check Use Artboards....
Read more >
How SVG Line Animation Works | CSS-Tricks
I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found