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.

Example

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

Transform functions

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.

Matrix

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:

𝑎𝑐𝑒
            𝑏𝑑𝑓
            001

which maps coordinates from a previous coordinate system into a new coordinate system by the following matrix equalities:

𝑥_newCoordSys
            𝑦_newCoordSys
            1
        =𝑎𝑐𝑒
            𝑏𝑑𝑓
            001
           𝑥_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:

Translate

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:

Scale

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:

Rotate

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:

SkewX

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:

SkewY

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:

Specifications

Specification	Status	Comment
CSS Transforms Level 2	Editor's Draft
CSS Transforms Level 1	Working Draft
Scalable Vector Graphics (SVG) 2	Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)	Recommendation	Initial definition