Comment corriger un comportement d'animation inattendu dans les sous-éléments SVG avec « transform-box : fill-box ; » ?

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

Lors de la tentative d'animation d'un sous-élément dans un SVG, l'origine de transformation de l'élément est souvent défini par rapport à l'ensemble du SVG plutôt qu'au sous-élément spécifique animé. Cela peut entraîner un comportement d'animation inattendu, tel qu'un élément semblant s'étendre à partir du coin supérieur gauche du SVG au lieu de son propre centre.

Pour résoudre ce problème, CSS fournit la propriété transform-box qui peut être utilisé pour définir la boîte qui sera affectée par la transformation. En définissant transform-box sur fill-box, la transformation sera appliquée uniquement à la zone de contenu de l'élément (c'est-à-dire la zone occupée par le contenu visible de l'élément).

Considérez l'exemple ci-dessous, où un rectangle (id="animated-box") dans un SVG est mis à l'échelle à l'aide de l'animation CSS :

@keyframes scaleBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#animated-box {
  animation: scaleBox 2s infinite;
}

Sans définir la propriété transform-box, le rectangle sera mis à l'échelle à partir du coin supérieur gauche du SVG, comme son origine de transformation est définie sur (0,0) par rapport à l'ensemble du SVG.

Pour corriger ce comportement et avoir l'échelle du rectangle à partir de son propre centre, ajoutez transform-box: fill-box; au sélecteur #animated-box :

@keyframes scaleBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}

Maintenant, le rectangle sera mis à l'échelle à partir de son propre centre, car la propriété transform-box garantit que la transformation est appliquée uniquement à la zone de contenu de l'élément. Cela offre un meilleur contrôle sur l'animation et permet d'obtenir des résultats plus précis et visuellement attrayants.

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!