Voici quelques titres basés sur des questions qui correspondent au contenu de votre article : * Pourquoi mon sous-élément SVG est-il mis à l'échelle à partir du coin supérieur gauche ? * Comment corriger les problèmes d'origine de transformation lors de la mise à l'échelle du sous-SVG

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

Lors de la mise à l'échelle des sous-éléments dans un SVG, l'origine de transformation par défaut est définie sur le point global du SVG (0,0), qui est le coin supérieur gauche. Cela peut entraîner un comportement de mise à l'échelle inattendu si l'origine souhaitée est le centre de l'élément mis à l'échelle.

Pour résoudre ce problème, modifiez la propriété transform-box de l'élément que vous souhaitez animer. Par défaut, transform-box utilise le modèle border-box, dans lequel les opérations de transformation sont appliquées par rapport à la boîte de l'élément, y compris son remplissage et sa bordure. Pour résoudre le problème d'origine, définissez transform-box: fill-box;.

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>

En définissant transform-box sur fill-box, le les opérations de transformation seront appliquées par rapport au contenu réel de l'élément au lieu de sa boîte. Cela garantira que l'animation de mise à l'échelle provient du centre du sous-élément.

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!