SVG animer chemin d attribut

Est-il possible d'utiliser SVG pour animer la d attribut de <path>?

Que je peux en tirer à la fois un losange et un cercle comme un chemin fait de huit courbes de bézier:

<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>

Je tiens à animer la transformation de l'un à l'autre.

Je pourrais simuler cela en javascript (juste par interpolation linéaire de la courbe de bézier paramètres à certains moments), mais je veux savoir si il existe un moyen de le faire avec SVG.

(Le cercle et le diamant sont qu'un exemple - en réalité, je voudrais faire la transition entre deux arbitraire des solides du même nombre de courbes de bézier).

OriginalL'auteur rampion | 2011-11-19

  1. 17

    C'est possible. Il y a beaucoup d'exemples de l'animation de la d élément d'un chemin d'accès ici: http://hoffmann.bplaced.net/svgtest/index.php?in=attributes#pathd y compris l'animation des courbes de bézier. Vous devriez être en mesure de s'adapter à votre cas d'utilisation.

    C'est path15 sans l'arc drapeau de l'animation. Le grand arc de drapeau ne peut être égal à 0 ou 1, afin de l'animer de façon linéaire ne fait pas beaucoup de sens.

    <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>
    Je ne vois que les transforme ici - je ne sais pas comment je voudrais les utiliser pour effectuer l'interpolation (comme je peux le faire en javascript)
    On dirait que je parle un peu vite. Il semble que toutes les animations n'est pas encore prise en charge dans mon navigateur (FF8): path15 juste clignote à partir d'un état à l'autre, tandis que path16 une transformation sans.
    Vous venez de fournir les points de terminaison et les <animer> tag interpole automatiquement, c'est ce que la plupart des exemples sont en train de faire. Vous pouvez utiliser keyTimes et/ou keySplines si vous voulez plus de contrôle.
    path15 essaie d'animer le grand arc de drapeau de 0 à 1. Si vous gardez le drapeau de la même valeur, il interpole amende.
    Est-il possible de faire le chemin de l'animation sans SMIL car il est obsolète et a une mauvaise prise en charge du navigateur? Je veux dire de l'animation à l'aide de styles - est-il possible?

    OriginalL'auteur Robert Longson