current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 3 down vote favorite

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="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.

share|improve this question
    
My congratulations ;-) –  Leo Mar 28 '10 at 0:21

2 Answers 2

up vote 4 down vote accepted

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!!!)
share|improve this answer
    
Thank you for your response. In regards to the line outside the image, that is a mistake only evident in this example. The canvas size in my working copy is 1020x768, but thanks for catching it :). The Obscure time values are important to the success of the animation, however, I can alter these and simply elongate the animation. If milliseconds are an acceptable parameter, then theoretically this should work, maybe I should translate to milliseconds and append with 'ms' (? ... input appreciated) –  Sandwich Mar 27 '10 at 20:03
    
Well, if canvas size isn't the problem, then the only thing I changed are the time values. So this has to be the source of your problem ;-) –  Leo Mar 27 '10 at 20:05
    
Thanks Mef!!!!! I'll post a link when I get it working ;) –  Sandwich Mar 27 '10 at 20:09
    
... Ran into another issue, maybe you know the solution? ... Question updated. –  Sandwich Mar 27 '10 at 20:51
    
Maybe you should open a new question, chances are higher that more people look at it. I will try... tomorrow ;-) –  Leo Mar 27 '10 at 21:04
up vote 2 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.