Pourquoi mon sous-élément SVG est-il mis à l'échelle à partir du coin supérieur gauche plutôt que de son centre ?

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

Lorsqu'ils tentent de mettre à l'échelle des sous-éléments dans un SVG, les utilisateurs peuvent rencontrer des incohérences avec le point d'origine de la transformation. Plus précisément, l'origine est définie sur (0,0) en fonction du SVG global plutôt que du centre du sous-élément. Ce comportement donne l'impression que les animations « volent » depuis le coin supérieur gauche au lieu de se mettre à l'échelle à partir du centre de l'élément souhaité.

Pour résoudre ce problème et définir l'origine de la transformation par rapport à l'élément spécifique animé, la transformation- la propriété box doit être incluse. En le définissant sur "fill-box", l'origine de la transformation est liée aux dimensions du sous-élément :

<code class="css">#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

Cette modification garantit que le sous-élément, dans ce cas, la boîte animée, est mis à l'échelle de son propre centre plutôt que de l'origine de l'ensemble du SVG.

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!