Illustrator SVG > Polyline > Wont animate
See original GitHub issueHello, 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:
- Created 8 years ago
- Comments:5 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks @wjramos ⭐
@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 invalidSee my fork that includes the library: http://codepen.io/wjramos/pen/eZrLOj