Pourquoi mon animation de sous-élément SVG part-elle de la mauvaise origine ?

Problème d'origine de transformation CSS sur le sous-élément SVG

Lorsque vous travaillez avec des SVG, il peut être difficile de contrôler l'origine de transformation des sous-éléments éléments. Par défaut, les animations et transformations CSS utilisent l'origine globale du SVG (0,0), et non le centre de l'élément spécifique animé.

Comprendre le problème

Dans Dans l'exemple fourni, l'intention est de mettre à l'échelle le sous-élément "animated-box" à partir de son centre. Cependant, l'animation commence à partir de l'origine du SVG (0,0), donnant l'illusion que la boîte "vole par le haut à gauche".

Solution : Transformer la boîte

Pour définir l'origine de la transformation par rapport à l'élément animé, nous pouvons utiliser la propriété "transform-box":

<code class="css">transform-box: fill-box;</code>

La valeur "fill-box" indique au navigateur d'utiliser le sous-élément boîte englobante (la zone qu’elle remplit) comme origine de la transformation. Cela garantit que l'animation s'adapte à partir du centre de « animated-box » comme prévu.

Exemple mis à jour

Application de la propriété transform-box à notre exemple :

<code class="css">@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
}
#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

<code class="html"><svg ...>
  ...
  <rect id="animated-box" ...>
  ...
</svg></code>

Désormais, la « boîte animée » évolue à partir de son centre, créant une animation plus fluide et plus précise.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!