transform-origin

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.

Hinweise zur Verwendung

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

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

Angegebene Längenangaben, Prozentsätze und Schlüsselwörter (left, center, right, top, und bottom) beziehen sich alle auf die Bezugsbox. Da der Standardwert für transform-box view-box ist, sind die Transformationsursprungskoordinaten relativ zur viewBox des SVG-Elements, es sei denn, das Element selbst hat eine zugehörige CSS-Layout-Box.

Beispiele

Die folgenden Beispiele zeigen die Rotation eines rechteckigen Kastens um 30° um eine Reihe unterschiedlicher transform-origins. Das SVG wird in jedem Fall deklariert, wobei die ursprüngliche Box mit einer gestrichelten roten Umrandung gezeichnet wird, gefolgt von der gedrehten Box in Limettengrün, und dann der transform-origin, der als roter Fadenkreuzmarkierer gezeichnet wird.

Standard transform-origin

Standardmäßig hat transform-origin den Wert 0 0, der ihn beim Ursprung der viewBox platziert. Unten erweitern wir die viewBox auf negative Werte, damit Sie den gesamten Fadenkreuzmarkierer sehen können, und beachten Sie auch, dass er 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>

Zentrale transform-origin

Unten setzen wir transform-origin auf center, was den Ursprung in die Mitte der viewBox platziert, aber nicht in die 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

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