Comment définir correctement l'orientation d'un élément le long d'une trajectoire?

Question

Chaque fois que je mets "rotate =" auto "ou" rotate = "auto-reverse" le rectangle vole de façon chaotique partout. Comment puis-je résoudre ce problème?

<svg width="800" height="600"> 
 
    <rect x="200" y="300" width="40" height="15" fill="black"> 
 
    <animateMotion dur="3s" repeatCount="indefinite" 
 
    rotate="auto" 
 
    path="M200,0 m-200,0 a200,200 0 1,0 400,0 a200,200 0 1,0 -400,0" /> </rect> 
 
</svg>

Answer 1

Le problème est que l'origine du SVG, et donc de la <rect> est à (0,0) - en haut à gauche. Lorsque vous activez la rotation automatique, le rectangle oscille autour de ce point d'origine tout en suivant le mouvement.

La solution est de déplacer le <rect> à l'origine, de sorte que la rotation se produise autour d'un point dans le rect.

<svg width="800" height="600"> 
 
    <rect x="0" y="0" width="40" height="15" fill="black"> 
 
    <animateMotion dur="3s" repeatCount="indefinite" 
 
     rotate="auto" 
 
     path="M200,0 m-200,0 a200,200 0 1,0 400,0 a200,200 0 1,0 -400,0" /> 
 
    </rect> 
 
</svg>

Cela signifie également que le centre de la rect suit votre chemin de mouvement, et il n'est pas compensé (par x = "200" y = "300").

Bien sûr, cela signifie que le mouvement n'est pas là où vous voulez qu'il soit. La meilleure solution à cela, en général, est d'envelopper les deux éléments dans un élément de groupe (<g>) qui déplace tout à l'endroit désiré avec un transform.

<svg width="800" height="600"> 
 
    <g transform="translate(200,300)"> 
 
    <rect x="0" y="0" width="40" height="15" fill="black"> 
 
     <animateMotion dur="3s" repeatCount="indefinite" 
 
     rotate="auto" 
 
     path="M200,0 m-200,0 a200,200 0 1,0 400,0 a200,200 0 1,0 -400,0" /> 
 
    </rect> 
 
    </g> 
 
</svg>