javascript - animations - svg interactive
SVG animar ruta d atributo (1)
¿Es posible usar SVG para animar el atributo d de <path> ?
Puedo dibujar tanto un diamante como un círculo como un camino hecho de ocho curvas más bezier:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
jQuery(function($){
var a = 50;
var draw = function(b, c, d, e, f){
return [
''M'', a, 0,
''C'', b, c, '','', d, e, '','', f, f,
''C'', e, d, '','', c, b, '','', 0, a,
''C'', -c, b, '','', -e, d, '','', -f, f,
''C'', -d, e, '','', -b, c, '','', -a, 0,
''C'', -b, -c, '','', -d, -e, '','', -f, -f,
''C'', -e, -d, '','', -c, -b, '','', 0, -a,
''C'', c, -b, '','', e, -d, '','', f, -f,
''C'', d, -e, '','', b, -c, '','', a, 0,
].join('' '');
};
$(''#diamond'').attr({ d: draw( 5*a/6, a/6, 2*a/3, a/3, a/2 ) });
$(''#circle'' ).attr({ d: draw( a, a*Math.PI/12, (2 + 1/Math.sqrt(2))*a/3, a*Math.PI/6, a/Math.sqrt(2) ) });
});
</script>
</head>
<body>
<svg width="200" height="200">
<g transform="translate(100,100)">
<path id=diamond fill="blue" stroke="black"/>
</g>
</svg>
<svg width="200" height="200">
<g transform="translate(100,100)">
<path id=circle fill="red" stroke="black"/>
</g>
</body>
</html>
Me gustaría animar la transformación de uno a otro.
Podría simular esto en javascript (solo mediante la interpolación lineal de los parámetros de la curva bezier en ciertos momentos), pero quiero saber si hay una manera de hacerlo con SVG.
(El círculo y el diamante son solo un ejemplo, en realidad me gustaría hacer la transición entre dos sólidos arbitrarios hechos del mismo número de curvas Bezier).
Es posible. Hay muchos ejemplos de animar el elemento d de una ruta aquí: http://hoffmann.bplaced.net/svgtest/index.php?in=attributes#pathd incluida la animación de curvas de bezier. Debe poder adaptar uno para su caso de uso específico.
Esto es path15 sin la animación de la bandera de arco. El indicador de arco grande solo puede ser 0 o 1, por lo que animarlo linealmente no tiene mucho sentido.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px" viewBox="-500 -500 1000 1000">
<path id="p1"
d="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
stroke="blue" fill="none"
stroke-width="4" />
<animate xlink:href="#p1"
attributeName="d"
attributeType="XML"
from="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
to="M 300 600 A 300 400 -20 1 0 400 200 a 200 600 -50 0 1 100 400"
dur="10s"
fill="freeze" />
</svg>