Wie korrigiere ich unerwartetes Animationsverhalten in SVG-Unterelementen mit „transform-box: fill-box;“?

CSS-Transformationsursprungsproblem beim SVG-Unterelement

Beim Versuch, ein Unterelement innerhalb eines SVG zu animieren, wird der Transformationsursprung des Elements angezeigt wird häufig relativ zur gesamten SVG-Datei festgelegt und nicht zum spezifischen Unterelement, das animiert wird. Dies kann zu unerwartetem Animationsverhalten führen, z. B. wenn ein Element von der oberen linken Ecke der SVG-Datei anstelle seiner eigenen Mitte skaliert zu werden scheint.

Um dieses Problem zu beheben, stellt CSS die Eigenschaft „transform-box“ bereit, die dies kann wird verwendet, um die Box zu definieren, die von der Transformation betroffen sein wird. Wenn Sie „transform-box“ auf „fill-box“ setzen, wird die Transformation nur auf die Inhaltsbox des Elements angewendet (d. h. den Bereich, der vom sichtbaren Inhalt des Elements eingenommen wird).

Betrachten Sie das folgende Beispiel, bei dem es sich um ein Rechteck handelt (id="animated-box") innerhalb einer SVG-Datei wird mithilfe der CSS-Animation skaliert:

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

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

Ohne die Eigenschaft „transform-box“ festzulegen, wird das Rechteck von der oberen linken Ecke der SVG aus skaliert sein Transformationsursprung ist relativ zum gesamten SVG auf (0,0) gesetzt.

Um dieses Verhalten zu korrigieren und das Rechteck von seiner eigenen Mitte aus skalieren zu lassen, fügen Sie transform-box: fill-box; zum #animated-box-Selektor:

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

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

Jetzt wird das Rechteck von seiner eigenen Mitte aus skaliert, da die Eigenschaft „transform-box“ sicherstellt, dass die Transformation nur auf die Inhaltsbox des Elements angewendet wird. Dies bietet eine bessere Kontrolle über die Animation und ermöglicht präzisere und optisch ansprechendere Ergebnisse.

Das obige ist der detaillierte Inhalt vonWie korrigiere ich unerwartetes Animationsverhalten in SVG-Unterelementen mit „transform-box: fill-box;“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!