Draft for Information Only
Content
transform Example Transform functions Matrix Example Translate Example Scale Example Rotate Example SkewX Example SkewY Example Specifications Sources and References
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 difference 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.
SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg style='border:1px solid black' width='230' height='160' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<svg width='176' height='136' viewBox='-25, -25, 176, 136' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
<svg transform='scale(0.852272727272727)' preserveAspectRatio='xMinYMin' viewBox='-40 0 150 110 ' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<rect x='0' y='0' width='110' height='110' fill='None' stroke='black' stroke-width='0.5'/>
<g fill='grey' stroke='black'
transform='rotate(-10 55 100)
translate(-45.5 52.5)
skewX(40)
scale(1 0.5)'>
<path id='heart' d='m55,55m0,-25a25,25 0,0,1 50,0q0,50 -50,75q-50,-25 -50,-75a25,25 0,0,1 50,0' /> />
</g>
<use xlink:href='#heart' fill='none' stroke='red' stroke-width='0.5'/>
</svg>
</svg>
<text x='5' y='17' font-size='20'>(-40,0)</text>
<text x='145' y='17' font-size='20'>(110,0)</text>
<text x='5' y='155' font-size='20'>(-40,110)</text>
<text x='145' y='155' font-size='20'>(110,110)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='175' cy='25' r='2' fill='black'/>
<circle cx='25' cy='135' r='2' fill='black'/>
<circle cx='175' cy='135' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:
In SVG 1.1, only these 16 elements were allowed to use it: <a> , <circle> , <clipPath> , <defs> , <ellipse> , <foreignObject> , <g> , <image> , <line> ,
<path> , <polygon> , <polyline> , <rect> , <switch> , <text> , and <use> ).
Also, as a legacy from SVG 1.1, <linearGradient> and <radialGradient> support the gradientTransform attribute, and <pattern> supports the patternTransform attribute, both of which act exactly like the transform attribute.
Value
<transform-list>
Default value
none
Animatable
Yes
The following transform functions can be used by the transform attribute <transform-list>
Warning: As per the spec, you should be able to also use CSS transform functions . However, the compatibility isn't guaranteed.
The
matrix(<a> <b> <c> <d> <e> <f>) transform function specifies a transformation in the form of a transformation matrix of six values.
matrix(𝑎,𝑏,𝑐,𝑑,𝑒,𝑓) is equivalent to applying the transformation matrix:
𝑎 𝑐 𝑒
𝑏 𝑑 𝑓
0 0 1
which maps coordinates from a previous coordinate system into a new coordinate system by the following matrix equalities:
𝑥newCoordSys
𝑦newCoordSys
1
= 𝑎 𝑐 𝑒
𝑏 𝑑 𝑓
0 0 1
𝑥prevCoordSys
𝑦prevCoordSys
1
= 𝑎𝑥prevCoordSys +𝑐𝑦prevCoordSys +𝑒
𝑏𝑥prevCoordSys +𝑑𝑦prevCoordSys +𝑓
1
Example
SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg style='border:1px solid black' width='230' height='230' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<svg width='176' height='206' viewBox='-25, -25, 176, 206' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
<svg transform='scale(0.87378640776699)' preserveAspectRatio='xMinYMin' viewBox='0 0 150 180' xmlns='http://www.w3.org/2000/svg'>
<rect x='0' y='0' width='150' height='180' fill='None' stroke='black'/>
<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>
</svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='145' y='17' font-size='20'>(150,0)</text>
<text x='5' y='225' font-size='20'>(0,180)</text>
<text x='145' y='225' font-size='20'>(150,180)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='175' cy='25' r='2' fill='black'/>
<circle cx='25' cy='205' r='2' fill='black'/>
<circle cx='175' cy='205' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:
The translate(<x> [<y>]) transform function moves the object by x and y . If y is not provided, it is assumed to be 0 .
In other words:
xnew = xold + <x>
ynew = yold + <y>
Example
SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg style='border:1px solid black' width='180' height='150' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<svg width='126' height='126' viewBox='-25, -25, 126, 126' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
<svg transform='scale(0.793650793650794)' preserveAspectRatio='xMinYMin' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<!-- 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>
</svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='95' y='17' font-size='20'>(100,0)</text>
<text x='5' y='145' font-size='20'>(0,100)</text>
<text x='95' y='145' font-size='20'>(100,100)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='125' cy='25' r='2' fill='black'/>
<circle cx='25' cy='125' r='2' fill='black'/>
<circle cx='125' cy='125' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:
The scale(<x> [<y>]) transform function specifies a scale operation by x and y . If y is not provided, it is assumed to be equal to x .
Example
SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg style='border:1px solid black' width='180' height='150' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<svg width='126' height='126' viewBox='-25, -25, 126, 126' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
<svg transform='scale(0.793650793650794)' preserveAspectRatio='xMinYMin' viewBox='-5 -5 10 10' xmlns='http://www.w3.org/2000/svg'>
<!-- uniform scale -->
<circle cx='0' cy='0' r='1' fill='red' transform='scale(4)' />
<!-- vertical scale -->
<circle cx='0' cy='0' r='1' fill='yellow' transform='scale(1,4)' />
<!-- horizontal scale -->
<circle cx='0' cy='0' r='1' fill='pink' transform='scale(4,1)' />
<!-- No scale -->
<circle cx='0' cy='0' r='1' fill='black' />
</svg>
</svg>
<text x='5' y='17' font-size='20'>(-5,-5)</text>
<text x='95' y='17' font-size='20'>(5,-5)</text>
<text x='5' y='145' font-size='20'>(-5,5)</text>
<text x='95' y='145' font-size='20'>(5,5)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='125' cy='25' r='2' fill='black'/>
<circle cx='25' cy='125' r='2' fill='black'/>
<circle cx='125' cy='125' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:
The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotation is about the point (x, y) .
Example
SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg style='border:1px solid black' width='150' height='80' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<svg width='96' height='56' viewBox='-25, -25, 96, 56' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
<svg transform='scale(0.729166666666667)' preserveAspectRatio='xMinYMin' transform='scale(0.729166666666667)' preserveAspectRatio='xMinYMin' viewBox='-3 -1 7 3' xmlns='http://www.w3.org/2000/svg'>
<rect x='0' y='0' width='1' height='1' />
<!-- rotation is done around the point 0,0 -->
<rect x='0' y='0' width='1' height='1' fill='red' transform='rotate(100)' />
<!-- rotation is done around the point 1,1 -->
<rect x='0' y='0' width='1' height='1' fill='green' transform='rotate(100,1,1)' />
</svg>
</svg>
<text x='5' y='17' font-size='20'>(-3,-1)</text>
<text x='65' y='17' font-size='20'>(4,-1)</text>
<text x='5' y='75' font-size='20'>(-3,2)</text>
<text x='65' y='75' font-size='20'>(4,2)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='95' cy='25' r='2' fill='black'/>
<circle cx='25' cy='55' r='2' fill='black'/>
<circle cx='95' cy='55' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:
The skewX(<a>) transform function specifies a skew transformation along the x axis by a degrees.
Example
SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg style='border:1px solid black' width='200' height='170' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<svg width='146' height='146' viewBox='-25, -25, 146, 146' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
g transform='scale(10)'
<svg transform='scale(0.821917808219178) ' preserveAspectRatio='xMinYMin' viewBox='-6 -6 12 12' 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(45)' />
</svg>
</g>
</svg>
<text x='5' y='17' font-size='20'>(-6,-6)</text>
<text x='115' y='17' font-size='20'>(6,-6)</text>
<text x='5' y='165' font-size='20'>(-6,6)</text>
<text x='115' y='165' font-size='20'>(6,6)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='145' cy='25' r='2' fill='black'/>
<circle cx='25' cy='145' r='2' fill='black'/>
<circle cx='145' cy='145' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:
The skewY(<a>) transform function specifies a skew transformation along the y axis by a degrees.
Example
SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg style='border:1px solid black' width='200' height='170' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<svg width='146' height='146' viewBox='-25, -25, 146, 146' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
<svg transform='scale(0.821917808219178)' preserveAspectRatio='xMinYMin' viewBox='-6 -6 12 12' 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(45)' />
</svg>
</svg>
<text x='5' y='17' font-size='20'>(-6,-6)</text>
<text x='115' y='17' font-size='20'>(6,-6)</text>
<text x='5' y='165' font-size='20'>(-6,6)</text>
<text x='115' y='165' font-size='20'>(6,6)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='145' cy='25' r='2' fill='black'/>
<circle cx='25' cy='145' r='2' fill='black'/>
<circle cx='145' cy='145' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:
Sources and References
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
©sideway
ID: 211200010 Last Updated: 12/10/2021 Revision: 0 Ref:
References
http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999