transform-origin

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das SVG-Attribut transform-origin legt den Ursprung für die Transformationen eines Elements fest.

Sie können dieses Attribut mit jedem SVG-Element verwenden.

Hinweis: Als Präsentationsattribut hat transform-origin auch eine entsprechende CSS-Eigenschaft: transform-origin. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Beispiele

Die folgenden Beispiele zeigen, wie ein rechteckiger Kasten um 30° um verschiedene transform-origin-Punkte gedreht wird. In jedem Fall wird das SVG mit dem ursprünglichen Kasten als gestrichelte rote Kontur dargestellt, gefolgt vom gedrehten Kasten in Hellgrün und dem transform-origin als roter Fadenkreuzmarkierung.

Standardmäßiger transform-origin

Standardmäßig hat transform-origin den Wert 0 0 und liegt damit am Ursprung der viewBox. Im folgenden Beispiel erweitern wir die viewBox auf negative Werte, damit Sie die gesamte Fadenkreuzmarkierung sehen können. Beachten Sie auch, dass der Ursprung nicht immer in der oberen linken Ecke des <svg>-Elements liegt.

html

<svg
  viewBox="-10 -10 300 300"
  xmlns="http://www.w3.org/2000/svg"
  width="310"
  height="310">
  <rect
    x="60"
    y="10"
    width="180"
    height="180"
    fill="none"
    stroke="red"
    stroke-width="3"
    stroke-dasharray="3 3" />
  <rect
    x="60"
    y="10"
    width="180"
    height="180"
    fill="lime"
    opacity="0.5"
    transform="rotate(30)" />
  <g transform="translate(0 0)">
    <circle cx="0" cy="0" r="3" fill="red" opacity="0.5" />
    <path d="M -8 0 h 16 m -8 -8 v 16" fill="none" stroke="red" />
    <circle cx="0" cy="0" r="6" fill="none" stroke="red" />
  </g>
</svg>

Zentrierter transform-origin

Im folgenden Beispiel setzen wir transform-origin auf center. Dadurch liegt der Ursprung in der Mitte der viewBox, jedoch nicht in der Mitte des transformierten Elements.

html

<svg
  viewBox="-10 -10 300 300"
  xmlns="http://www.w3.org/2000/svg"
  width="310"
  height="310">
  <rect
    x="60"
    y="10"
    width="180"
    height="180"
    fill="none"
    stroke="red"
    stroke-width="3"
    stroke-dasharray="3 3" />
  <rect
    x="60"
    y="10"
    width="180"
    height="180"
    fill="lime"
    opacity="0.5"
    transform="rotate(30)"
    transform-origin="center" />
  <g transform="translate(150 150)">
    <circle cx="0" cy="0" r="3" fill="red" opacity="0.5" />
    <path d="M -8 0 h 16 m -8 -8 v 16" fill="none" stroke="red" />
    <circle cx="0" cy="0" r="6" fill="none" stroke="red" />
  </g>
</svg>

transform-origin relativ zum transformierten Element

Damit transform-origin relativ zum transformierten Element ist, können Sie die Eigenschaft transform-box verwenden. Im folgenden Beispiel setzen wir transform-box auf fill-box. Dadurch bezieht sich transform-origin auf die Bounding-Box des transformierten Elements.

html

<svg
  viewBox="-10 -10 300 300"
  xmlns="http://www.w3.org/2000/svg"
  width="310"
  height="310">
  <rect
    x="60"
    y="10"
    width="180"
    height="180"
    fill="none"
    stroke="red"
    stroke-width="3"
    stroke-dasharray="3 3" />
  <rect
    class="transformed-elem"
    x="60"
    y="10"
    width="180"
    height="180"
    fill="lime"
    opacity="0.5"
    transform="rotate(30)"
    transform-origin="center" />
  <g transform="translate(150 100)">
    <circle cx="0" cy="0" r="3" fill="red" opacity="0.5" />
    <path d="M -8 0 h 16 m -8 -8 v 16" fill="none" stroke="red" />
    <circle cx="0" cy="0" r="6" fill="none" stroke="red" />
  </g>
</svg>

css

.transformed-elem {
  transform-box: fill-box;
}

Weitere Beispiele finden Sie unter CSS transform-origin.

Hinweise zur Verwendung

Werte	Siehe `transform-origin`
Standardwert	`0 0`
Animierbar	Ja

Hinweis: Der Standardwert von transform-origin ist für alle SVG-Elemente 0 0, außer für <svg>-Wurzelelemente und <svg>-Elemente, die direkte Kinder eines foreignObject sind. Für diese Elemente gilt wie bei normalem CSS transform-origin: 50% 50%.

Angegebene Längen, Prozentwerte und Schlüsselwörter (left, center, right, top und bottom) beziehen sich alle auf die Referenzbox. Da der Standardwert von transform-box view-box ist, beziehen sich die Koordinaten des Transformationsursprungs auf die viewBox des SVG-Elements, sofern das Element selbst keine zugehörige CSS-Layoutbox hat.

Spezifikationen

Spezifikation
CSS Transforms Module Level 1 # transform-origin-property
Scalable Vector Graphics (SVG) 2 # PresentationAttributes

Browser-Kompatibilität

Siehe auch

CSS-Eigenschaft transform-origin

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden