Comment faire pivoter un objet autour du centre exact de l'écran à l'aide de animateTransform?

Question

Tenir compte du code SVG suivant pour déplacer un cercle autour du centre de l'écran, avec des dimensions codées en dur:

<svg xmlns="http://www.w3.org/2000/svg"> 
    <g> 
     <ellipse id="circ" style="fill:#000000" 
      cx="60%" cy="50%" 
      rx="10" ry="10" /> 

     <!--Assuming window size is 1000x1000-->  
     <animateTransform attributeName="transform" 
      type="rotate" dur="10s" 
      from="0,500,500" 
      to="360,500,500" 
      repeatCount="indefinite"/> 
    </g> 
</svg> 

Si je tente de fournir au centre de rotation pour cent, l'animation ne fonctionne pas all:

<animateTransform attributeName="transform" 
    type="rotate" dur="10s" 
    from="0,50%,50%" 
    to="360,50%,50%" 
    repeatCount="indefinite"/> 

Comment résoudre ce problème?

Answer 1

Définissez un viewBox sur votre fichier SVG, puis, quelle que soit la taille, l'ellipse tournera autour de son centre.

viewBox="0 0 1000 1000" 

La valeur de 1000 pour la largeur et la hauteur est choisie ici parce qu'il ferait 500 sera le centre.

svg:nth-child(1) { 
 
    width: 200px; 
 
} 
 

 
svg:nth-child(2) { 
 
    width: 500px; 
 
} 
 

 
svg { 
 
    border: solid 1px green; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> 
 
    <g> 
 
     <ellipse id="circ" style="fill:#000000" 
 
      cx="60%" cy="50%" 
 
      rx="10" ry="10" /> 
 

 
     <!--Assuming window size is 1000x1000-->  
 
     <animateTransform attributeName="transform" 
 
      type="rotate" dur="10s" 
 
      from="0,500,500" 
 
      to="360,500,500" 
 
      repeatCount="indefinite"/> 
 
    </g> 
 
</svg> 
 

 
<!-- An exact duplicate of th first one --> 
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"> 
 
    <g> 
 
     <ellipse id="circ" style="fill:#000000" 
 
      cx="60%" cy="50%" 
 
      rx="10" ry="10" /> 
 

 
     <!--Assuming window size is 1000x1000-->  
 
     <animateTransform attributeName="transform" 
 
      type="rotate" dur="10s" 
 
      from="0,500,500" 
 
      to="360,500,500" 
 
      repeatCount="indefinite"/> 
 
    </g> 
 
</svg>