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

The animate property is very loosely documented. And unfortunately for me, the way the W3 documents SVG is VERY difficult understand and cross reference.

I'VE GOTTEN IT TO WORK (... a step forward at least)... should've known to convert seconds to milliseconds (slaps, forehead)

I've updated the code to reflect my next stepping stone (ran into another problem). When I have two lines animating, the other disappears when the next one starts, how do I make it so every line stays once it has been animated? ... I assume it has something to do with the 'fill' property, but 'fill=freeze' transforms the line 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's the solution

Add a fill attribute to your animate element with the value of freeze. Like so

<animate attributeName="y2" attributeType="XML" ... fill="free开发者_StackOverflowze" />

Here are some effects I achieved: SVGAnimate Compatible Browsers Only!!! [Opera, Safari, Chrome ], sorry no firefox or IE ... fair warning, it taxes CPU a bit.

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 major problems in your code:

• The line is outside the image (width: 480, x1: 585)
• Obscure time values (you are using hundredths of seconds there!!!)

I'm not sure this is what you're looking for, but you might want to take a look at Lazy Line Painter jQuery plugin.

Lazy Line Painter is a jQuery plugin which allows you to do SVG path animation. It works by converting your SVG line graphic to JavaScript code, then you import jQuery, Raphaël and the Lazy Line Painter jQuery plugin and voila – done.

The Lazy Line Painter plugin allows you to perform path animations. This means that if you’ve got an image, which consists of lines only (with a start & end, with no fills), then this plugin will allow you to perform an animation which will trace the line to draw the picture – as an animation.