transform-origin

Limited availability

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

Dastransform-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 hattransform-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 vontransform-origin ist0 0 für alle SVG-Elemente mit Ausnahme von Wurzel-<svg>-Elementen und<svg>-Elementen, die ein direktes Kind von einemforeignObject sind. Diese Elemente habentransform-origin: 50% 50%, wie im normalen CSS.

Angegebene Längen, Prozentsätze und Schlüsselwörter (left,center,right,top, undbottom) beziehen sich alle auf dasReferenzfeld. Da der Standardwert fürtransform-boxview-box ist, sind die Koordinaten des Transformationsursprungs relativ zurviewBox 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 verschiedenetransform-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 dertransform-origin als roter Fadenkreuzmarker.

Standard transform-origin

Standardmäßig hattransform-origin den Wert0 0, was es am Ursprung derviewBox platziert. Unten erweitern wir dieviewBox 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 wirtransform-origin aufcenter, was den Ursprung im Zentrum derviewBox 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

Umtransform-origin relativ zum transformierten Element zu machen, können Sie dietransform-box-Eigenschaft verwenden. Unten setzen wirtransform-box auffill-box, was dentransform-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       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 CSStransform-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

CSStransform-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

Movatterモバイル変換

transform-origin

Help improve MDN