transform-origin

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das transform-origin SVG-Attribut 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 ein entsprechendes CSS-Attribut: transform-origin. Wenn beide angegeben sind, hat das CSS-Attribut Vorrang.

Verwendungsnotizen

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

Hinweis: Der Standardwert von transform-origin ist 0 0 für alle SVG-Elemente mit Ausnahme von Wurzel-<svg>-Elementen und <svg>-Elementen, die ein direktes Kind von einem foreignObject sind. Diese Elemente haben transform-origin: 50% 50%, wie im normalen CSS.

Angegebene Längen, Prozentsätze und Schlüsselwörter (left, center, right, top, und bottom) beziehen sich alle auf das Referenzfeld. Da der Standardwert für transform-box view-box ist, sind die Koordinaten des Transformationsursprungs relativ zur viewBox des SVG-Elements, es sei denn, das Element selbst hat ein zugeordnetes CSS-Layout-Feld.

Beispiele

Die folgenden Beispiele demonstrieren die Drehung eines rechteckigen Kastens um 30° um verschiedene transform-origins. Das SVG wird in jedem Fall mit dem ursprünglichen Kasten in gestrichelter roter Umrandung deklariert, gefolgt vom gedrehten Kasten in limettengrün, und dann der transform-origin als roter Fadenkreuzmarker.

Standard transform-origin

Standardmäßig hat transform-origin den Wert 0 0, was es am Ursprung der viewBox platziert. Unten erweitern wir die viewBox auf negative Werte, damit Sie den vollständigen Fadenkreuzmarker sehen können, und beachten auch, dass es nicht immer die obere linke Ecke des <svg>-Elements sein muss.

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>

Center transform-origin

Unten setzen wir transform-origin auf center, was den Ursprung im Zentrum der viewBox platziert, jedoch nicht im Zentrum des Elementes, das transformiert wird.

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

Um transform-origin relativ zum transformierten Element zu machen, können Sie die transform-box-Eigenschaft verwenden. Unten setzen wir transform-box auf fill-box, was den transform-origin relativ zur Begrenzungsbox des transformierten Elements macht.

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

Siehe CSS transform-origin für weitere Beispiele.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

CSS transform-origin Eigenschaft

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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