transform
Das transform-Attribut definiert eine Liste von Transformationsdefinitionen, die auf ein Element und dessen Kinder angewendet werden.
Hinweis: Seit SVG2 ist transform ein Präsentationsattribut, was bedeutet, dass es als CSS-Eigenschaft verwendet werden kann. Beachten Sie jedoch, dass es einige Unterschiede in der Syntax zwischen der CSS-Eigenschaft und dem Attribut gibt. Siehe die Dokumentation zur CSS-Eigenschaft transform für die spezifische Syntax in diesem Fall.
Sie können dieses Attribut mit jedem SVG-Element verwenden.
Beispiel
<svg
viewBox="-40 0 150 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g
fill="grey"
transform="rotate(-10 50 100)
translate(-36 45.5)
skewX(40)
scale(1 0.5)">
<path
id="heart"
d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" />
</g>
<use href="#heart" fill="none" stroke="red" />
</svg>
In SVG 1.1 durften es nur diese 16 Elemente verwenden: <a>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switch>, <text> und <use>.
Auch als Überbleibsel aus SVG 1.1 unterstützen <linearGradient> und <radialGradient> das gradientTransform-Attribut, und <pattern> unterstützt das patternTransform-Attribut, die beide genau wie das transform-Attribut wirken.
| Wert | <transform-list> |
|---|---|
| Standardwert | none |
| Animierbar | Ja |
Transformationsfunktionen
Die folgenden Transformationsfunktionen können durch das transform-Attribut <transform-list> verwendet werden
Warnung: Laut Spezifikation sollten Sie auch CSS transform functions verwenden können. Die Kompatibilität ist jedoch nicht garantiert.
Matrix
Die matrix(<a> <b> <c> <d> <e> <f>)-Transformationsfunktion spezifiziert eine Transformation in Form einer Transformationsmatrix mit sechs Werten. matrix(a,b,c,d,e,f) entspricht der Anwendung der Transformationsmatrix:
Dies transformiert Koordinaten von einem vorherigen Koordinatensystem in ein neues Koordinatensystem durch die folgenden Matrixgleichungen:
Beispiel
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="20" fill="green" />
<!--
In the following example we are applying the matrix:
[a c e] [3 -1 30]
[b d f] => [1 3 40]
[0 0 1] [0 0 1]
which transform the rectangle as such:
top left corner: oldX=10 oldY=10
newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 10 + 30 = 50
newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 10 + 40 = 80
top right corner: oldX=40 oldY=10
newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 10 + 30 = 140
newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 10 + 40 = 110
bottom left corner: oldX=10 oldY=30
newX = a * oldX + c * oldY + e = 3 * 10 - 1 * 30 + 30 = 30
newY = b * oldX + d * oldY + f = 1 * 10 + 3 * 30 + 40 = 140
bottom right corner: oldX=40 oldY=30
newX = a * oldX + c * oldY + e = 3 * 40 - 1 * 30 + 30 = 120
newY = b * oldX + d * oldY + f = 1 * 40 + 3 * 30 + 40 = 170
-->
<rect
x="10"
y="10"
width="30"
height="20"
fill="red"
transform="matrix(3 1 -1 3 30 40)" />
</svg>
Translate
Die translate(<x> [<y>])-Transformationsfunktion bewegt das Objekt um x und y. Wenn y nicht angegeben ist, wird es als 0 angenommen.
Mit anderen Worten:
xNew = xOld + <x> yNew = yOld + <y>
Beispiel
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- No translation -->
<rect x="5" y="5" width="40" height="40" fill="green" />
<!-- Horizontal translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="blue"
transform="translate(50)" />
<!-- Vertical translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="red"
transform="translate(0 50)" />
<!-- Both horizontal and vertical translation -->
<rect
x="5"
y="5"
width="40"
height="40"
fill="yellow"
transform="translate(50 50)" />
</svg>
Scale
Die scale(<x> [<y>])-Transformationsfunktion spezifiziert eine Skalierungsoperation um x und y. Wenn y nicht angegeben ist, wird angenommen, dass es x entspricht.
Beispiel
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- uniform scale -->
<circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" />
<!-- vertical scale -->
<circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1, 4)" />
<!-- horizontal scale -->
<circle cx="0" cy="0" r="10" fill="pink" transform="scale(4, 1)" />
<!-- No scale -->
<circle cx="0" cy="0" r="10" fill="black" />
</svg>
Rotate
Die rotate(<a> [<x> <y>])-Transformationsfunktion spezifiziert eine Rotation um a Grad um einen gegebenen Punkt. Wenn die optionalen Parameter x und y nicht angegeben sind, erfolgt die Rotation um den Ursprung des aktuellen Benutzerskoordinatensystems. Wenn die optionalen Parameter x und y angegeben sind, erfolgt die Rotation um den Punkt (x, y).
Beispiel
<svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="10" height="10" />
<!-- rotation is done around the point 0,0 -->
<rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" />
<!-- rotation is done around the point 10,10 -->
<rect
x="0"
y="0"
width="10"
height="10"
fill="green"
transform="rotate(100, 10, 10)" />
</svg>
SkewX
Die skewX(<a>)-Transformationsfunktion spezifiziert eine Schertransformation entlang der x-Achse um a Grad.
Beispiel
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="-3" y="-3" width="6" height="6" />
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewX(30)" />
</svg>
SkewY
Die skewY(<a>)-Transformationsfunktion spezifiziert eine Schertransformation entlang der y-Achse um a Grad.
Beispiel
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<rect x="-3" y="-3" width="6" height="6" />
<rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewY(30)" />
</svg>
Spezifikationen
| Specification |
|---|
| CSS Transforms Module Level 1 # svg-transform |
| Scalable Vector Graphics (SVG) 2 # TransformProperty |