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

Question

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) THANKS MEF! ... 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"&gt;
<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="freeze" />

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.

1. With marker, trace and perspective enabled. http://dskvr.me/graffitar/graffitar-svg.php?trace=on&drag=on&marked=on
2. Eraser on black effect. http://dskvr.me/graffitar/graffitar-svg.php?sw=1&trace=on&drag=on&sc=0,0,0&bgc=0,0,0
3. Color, Sub-Stroke Offset+Delay. http://dskvr.me/graffitar/graffitar-svg.php?sw=5&so=on&drag=on&ss=3&sc=255,0,0&bgc=0,0,0
4. With Drips and Psuedo Light-Writer http://dskvr.me/graffitar/graffitar-svg.php?sw=5&st=3&drip=on&sc=0,175,0&bgc=0,0,0&ss=5&so=on&drag=on

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"&gt; 
<svg width="480" height="320" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"&gt; 
    <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!!!)