SVG, animate the line from x1, y1 to x2, y2?

Question

The animation property is very poorly documented. And, unfortunately, for me, as WD SVG documents it is VERY hard to understand and cross-referenced.

I GOT WORK (... at least one step ahead) ... had to convert seconds to milliseconds (slaps, forehead)

I updated the code to reflect my next step (ran into another problem). When I have two animation lines, the other disappears when the next one starts, how can I make sure that each line remains after the animation? ... I assume this has something to do with the "fill" property, but "fill = freeze "converts the string to vertical.

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="1020" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:rgb(255,255,255)" > <g style="stroke:black" > <line x1="242.25" y1="216" x2="242.25" y2="216" style="stroke:rgb(0,0,0);stroke-width:1;" > <animate attributeName="x2" attributeType="XML" from="242.25" to="219.9375" begin="0ms" dur="117ms" /> <animate attributeName="y2" attributeType="XML" from="216" to="170.999808" begin="0ms" dur="117ms" /> </line> <line x1="219.9375" y1="170.999808" x2="219.9375" y2="170.999808" style="stroke:rgb(0,0,0);stroke-width:1;" > <animate attributeName="x2" attributeType="XML" from="219.9375" to="207.1875" begin="117ms" dur="83ms" /> <animate attributeName="y2" attributeType="XML" from="170.999808" to="153.149952" begin="117ms" dur="83ms" /> </line> </g> </svg> 

UPDATE: I recently got it to work, here is the solution

Add a fill attribute to the animate element with a value of freeze . Thus

 <animate attributeName="y2" attributeType="XML" ... fill="freeze" /> 

Here are some effects that I have achieved: SVGAnimate Compatible browsers only !!! [Opera, Safari, Chrome], sorry no firefox or IE ... fair warning, it pays the processor a bit.

Answer 1

This works (tested in Opera):

 <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="480" height="320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g style="stroke:black" > <line x1="0" y1="0" x2="50" y2="50" style="stroke:rgb(0,0,0);stroke-width:20;" > <animate attributeName="x2" from="50" to="100" begin="1s" dur="2s" /> <animate attributeName="y2" from="50" to="100" begin="1s" dur="2s" /> </line> </g> </svg> 

I see two main problems in your code:

• The line is outside the image (width: 480, x1: 585)
• Fuzzy time values ​​(you use hundredths of a second !!!)

Answer 2

I'm not sure if this is what you are looking for, but you can take a look at the Lazy Line Painter jQuery plugin .

Lazy Line Painter is a jQuery plugin that allows you to create an SVG route animation. It works by converting SVG line graphics to JavaScript code, then you import jQuery, Raphaël and the lazy Line Painter jQuery plugin and execute wila.

The Lazy Line Painter plugin allows you to animate paths. This means that if you have an image consisting only of lines (from the beginning and after, without fills), then this plugin will allow you to perform an animation that will trace the line to draw the image - like an animation.