SVG, anima una linea da x1, y1 a x2, y2?

Question

La proprietà animata è molto liberamente documentata. E sfortunatamente per me, il modo in cui il W3 documenta SVG è MOLTO difficile da comprendere e fare riferimenti incrociati.

ho ottenuto di lavorare (... un passo in avanti, almeno) ... dovrebbe aver conosciuto per convertire secondi per millisecondi (schiaffi, fronte)

Ho aggiornato il codice per riflettere il mio prossimo trampolino (mi sono imbattuto in un altro problema). Quando ho due linee che animano, l'altra scompare quando inizia la prossima, come faccio a far sì che ogni riga rimanga una volta che è stata animata? ... Presumo che abbia qualcosa a che fare con la proprietà 'fill', ma 'fill = freeze' trasforma la linea in verticale.

<?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: Recentemente ho preso a lavorare, ecco la soluzione

Aggiungi un riempimento attributo al animare elemento con il valore di freeze. Come così

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

Qui ci sono alcuni effetti ho raggiunto: SVGAnimate browser compatibile solo !!! [Opera, Safari, Chrome], mi dispiace niente firefox o IE ... un avvertimento equo, tasserebbe un po 'la CPU.

Answer 1

questo funziona (testati 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> 

vedo due problemi principali nel codice:

• La linea è al di fuori dell'immagine (larghezza: 480, x1: 585)
• valori di tempo Obscure (si sta utilizzando centesimi di secondi lì !!!)

Answer 2

io non sono certo questo è quello che stai cercando, ma potresti voler dare un'occhiata a Lazy Line Painter jQuery plugin.

Lazy Line Painter è un plug-in jQuery che consente di eseguire l'animazione del percorso SVG. Funziona convertendo il tuo grafico a linee SVG in codice JavaScript, quindi importando jQuery, Raphaël e il plug-in jQuery Lazy Line Painter e voilà.

Il plug-in Lazy Line Painter consente di eseguire animazioni di percorso. Ciò significa che se hai un'immagine, che consiste solo di linee (con inizio & fine, senza riempimenti), allora questo plugin ti permetterà di eseguire un'animazione che traccerà la linea per disegnare l'immagine - come animazione.