Warum beginnt meine SVG-Unterelementanimation am falschen Ursprung?

CSS-Transformationsursprungsproblem bei SVG-Unterelementen

Bei der Arbeit mit SVGs kann es schwierig sein, den Transformationsursprung von Unterelementen zu steuern. Elemente. Standardmäßig verwenden CSS-Animationen und -Transformationen den gesamten SVG-Ursprung (0,0) und nicht die Mitte des spezifischen Elements, das animiert wird.

Das Problem verstehen

In In dem bereitgestellten Beispiel soll das Unterelement „animated-box“ von seiner Mitte aus skaliert werden. Die Animation beginnt jedoch am SVG-Ursprung (0,0), wodurch die Illusion entsteht, dass die Box „von links oben einfliegt“.

Lösung: Box transformieren

Um den Transformationsursprung relativ zum animierten Element festzulegen, können wir die Eigenschaft „transform-box“ verwenden:

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

Der Wert „fill-box“ weist den Browser an, die Unterelemente zu verwenden Begrenzungsrahmen (den Bereich, den er ausfüllt) als Transformationsursprung. Dadurch wird sichergestellt, dass die Animation wie beabsichtigt von der Mitte der „animierten Box“ skaliert wird.

Aktualisiertes Beispiel

Anwenden der Eigenschaft „transform-box“ auf unser 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 ...>
  ...
  <rect id="animated-box" ...>
  ...
</svg></code>

Jetzt wird die „animierte Box“ von ihrer Mitte aus skaliert, wodurch eine flüssigere und genauere Animation entsteht.

Das obige ist der detaillierte Inhalt vonWarum beginnt meine SVG-Unterelementanimation am falschen Ursprung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!