Pourquoi la mise à l'échelle d'un sous-élément SVG le fait-il « voler depuis le coin supérieur gauche » et comment y remédier ?

Problème d'origine de transformation CSS sur les sous-éléments SVG

Problème :

Lors de la tentative pour mettre à l'échelle un sous-élément dans un SVG, l'origine de la transformation est définie sur le point (0,0) du SVG global, ce qui fait que le sous-élément apparaît "voler depuis le coin supérieur gauche" lorsqu'il est animé.

Solution :

Pour définir l'origine de la transformation par rapport au sous-élément spécifique animé, ajoutez la règle CSS suivante :

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

Ceci garantit que la transformation est relative au cadre de délimitation du sous-élément, lui permettant de s'adapter à partir de son centre.

Exemple mis à jour :

<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 id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
        width: 195px;
    ">
    <defs>
    <style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}
</style>
    </defs>
    <rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
    <path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
    <rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect>
</svg></code>

Explication :

La propriété transform-box détermine quelle partie d'un élément est utilisée pour calculer l'origine de la transformation. En le définissant sur fill-box, l'origine est calculée en utilisant le cadre de délimitation du sous-élément au lieu de l'espace de coordonnées du SVG parent.

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!