Warum führt die Skalierung eines SVG-Unterelements dazu, dass es „von links oben einfliegt' und wie lässt sich das Problem beheben?

CSS-Transformationsursprungsproblem bei SVG-Unterelementen

Problem:

Beim Versuch Um ein Unterelement innerhalb einer SVG-Datei zu skalieren, wird der Transformationsursprung auf den (0,0)-Punkt der gesamten SVG-Datei gesetzt, was dazu führt, dass das Unterelement bei der Animation so aussieht, als würde es „von oben links hineinfliegen“.

Lösung:

Um den Transformationsursprung relativ zu dem spezifischen Unterelement festzulegen, das animiert wird, fügen Sie die folgende CSS-Regel hinzu:

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

Dies stellt sicher, dass die Transformation relativ zum Begrenzungsrahmen des Unterelements ist, sodass es von seiner Mitte aus skaliert werden kann.

Aktualisiertes Beispiel:

<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>

Erklärung:

Die Transformationsbox-Eigenschaft bestimmt, welcher Teil eines Elements zur Berechnung des Transformationsursprungs verwendet wird. Wenn Sie es auf „fill-box“ setzen, wird der Ursprung anhand des Begrenzungsrahmens des Unterelements anstelle des Koordinatenraums der übergeordneten SVG-Datei berechnet.

Das obige ist der detaillierte Inhalt vonWarum führt die Skalierung eines SVG-Unterelements dazu, dass es „von links oben einfliegt' und wie lässt sich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!