Svg transform with css

Basic transformations

All following transformations are summed up in an element’s transform attribute. Transformations can be chained by concatenating them, separated by whitespace.

Translation

It may be necessary to move an element around, even though you can position it with the according attributes. For this purpose, the translate() transformation stands ready.

svg width="40" height="50" style="background-color:#bff;"> rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> svg> 

The example will render a rectangle, translated to the point (30,40) instead of (0,0).

If the second value is not given, it is assumed to be 0.

Rotation

Rotating an element is quite a common task. Use the rotate() transformation for this:

svg width="31" height="31"> rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> svg> 

This example shows a square that is rotated by 45 degrees. The value for rotate() is given in degrees.

Multiple transformations

Transformations can be concatenated easily just by separating them with spaces. For example, translate() and rotate() are common used transformations.

svg width="40" height="50" style="background-color:#bff;"> rect x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> svg> 

This example shows again the small square shown above that this time is also rotated by 45 degrees.

Skewing

To make a rhombus out of our rectangle, the skewX() and skewY() transformations are available. Each one takes an angle that determines how far the element will be skewed.

Scaling

scale() changes the size of an element. It takes two numbers, the first being the x scale factor and the second being the y scale factor. The factors are taken as the ratio of the transformed dimension to the original. For example, 0.5 shrinks by 50%. If the second number is omitted, it is assumed to be equal to the first.

Complex transformations with matrix()

All the above transformations can be expressed by a 2×3 transformation matrix. To combine several transformations, one can set the resulting matrix directly with the matrix(a, b, c, d, e, f) transformation which maps coordinates from a previous coordinate system into a new coordinate system by

< x newCoordSys = a x prevCoordSys + c y prevCoordSys + e y newCoordSys = b x prevCoordSys + d y prevCoordSys + f \left< \beginx*<\mathrm > = a x*<\mathrm> + c y*<\mathrm> + e \ y*<\mathrm> = b x*<\mathrm> + d y*<\mathrm> + f \end \right.

See a concrete example on the SVG transform documentation. Detailed information about this property can be found in the SVG Recommendation.

Effects on Coordinate Systems

When using transformations you establish a new coordinate system inside the element the transformations apply to. That means, the units you specify for the element and its children might not follow the 1:1 pixel mapping, but are also distorted, skewed, translated and scaled according to the transformation.

svg width="100" height="100"> g transform="scale(2)"> rect width="50" height="50" /> g> svg> 

The resulting rectangular in the above example will be 100x100px. The more intriguing effects arise, when you rely on attributes like userSpaceOnUse and the such.

Embedding SVG in SVG

In contrast to HTML, SVG allows you to embed other svg elements seamlessly. This way you can also create new coordinate systems by utilizing the viewBox , width and height of the inner svg element.

svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> svg width="100" height="100" viewBox="0 0 50 50"> rect width="50" height="50" /> svg> svg> 

The example above has basically the same effect as the one above, namely that the rect will be twice as large as specified.

Found a content problem with this page?

This page was last modified on Mar 6, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

transform

The transform attribute defines a list of transform definitions that are applied to an element and the element’s children.

Note: As of SVG2, transform is a presentation attribute, meaning it can be used as a CSS property. However, be aware that there are some differences in syntax between the CSS property and the attribute. See the documentation for the CSS property transform for the specific syntax to use in that case.

You can use this attribute with any SVG element.

Example

html, body, svg  height: 100%; > 

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 xlink:href="#heart" fill="none" stroke="red" /> svg> 

In SVG 1.1, only these 16 elements were allowed to use it: , , , , , , , , , , , , , , , and ).

Value
Default value	none
Animatable	Yes

Transform functions

The following transform functions can be used by the transform attribute

Warning: As per the spec, you should be able to also use CSS transform functions. However, the compatibility isn’t guaranteed.

Matrix

( a c e b d f 0 0 1 ) \begin a & c & e \\ b & d & f \\ 0 & 0 & 1 \end which maps coordinates from a previous coordinate system into a new coordinate system by the following matrix equalities: ( x newCoordSys y newCoordSys 1 ) = ( a c e b d f 0 0 1 ) ( x prevCoordSys y prevCoordSys 1 ) = ( a x prevCoordSys + c y prevCoordSys + e b x prevCoordSys + d y prevCoordSys + f 1 ) \begin x_<\mathrm> \\ y_<\mathrm> \\ 1 \end = \begin a & c & e \\ b & d & f \\ 0 & 0 & 1 \end \begin x_<\mathrm > \\ y_<\mathrm> \\ 1 \end = \begin a x_<\mathrm> + c y_<\mathrm> + e \\ b x_<\mathrm> + d y_<\mathrm> + f \\ 1 \end

Example

html, body, svg  height: 100%; > 

svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> rect x="10" y="10" width="30" height="20" fill="green" />  [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

The translate( []) transform function moves the object by x and y . If y is not provided, it is assumed to be 0 .

Example

html, body, svg  height: 100%; > 

svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> rect x="5" y="5" width="40" height="40" fill="green" /> rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" /> rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" /> rect x="5" y="5" width="40" height="40" fill="yellow" transform="translate(50 50)" /> svg> 

Scale

The scale( []) transform function specifies a scale operation by x and y . If y is not provided, it is assumed to be equal to x .

Example

html, body, svg  height: 100%; > 

svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> circle cx="0" cy="0" r="10" fill="red" transform="scale(4)" /> circle cx="0" cy="0" r="10" fill="yellow" transform="scale(1, 4)" /> circle cx="0" cy="0" r="10" fill="pink" transform="scale(4, 1)" /> circle cx="0" cy="0" r="10" fill="black" /> svg> 

Rotate

Example

html, body, svg  height: 100%; > 

svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> rect x="0" y="0" width="10" height="10" /> rect x="0" y="0" width="10" height="10" fill="red" transform="rotate(100)" /> rect x="0" y="0" width="10" height="10" fill="green" transform="rotate(100, 10, 10)" /> svg> 

SkewX

Example

html, body, svg  height: 100%; > 

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

Example

html, body, svg  height: 100%; > 

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> 

Specifications

Found a content problem with this page?

This page was last modified on May 10, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник