SVG transform Attribute

Last Updated : 31 Mar, 2022

The transform attribute states the list of transform definitions that are applied to an element and its children. In SVG 1.1, only these elements are allowed to use transform attribute <a>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switch>, <text>, and <use>.

Syntax:

transform = scale() | translate() | rotate() | 
                 matrix() | skewX() | skewY()

Attribute Values: The transform attribute accepts the transform function mentioned above and described below.

skewX(): It enumerates a skew transformation along the x-axis by a degree.
skewY(): It enumerates a skew transformation along the y-axis by a degree.
scale(): It enumerates a scale operation by x and y. It is assumed to be equal to x if y is not provided.
rotate(): It enumerates a rotation by a degree about a given point.
translate(): It moves the object by x and y. It is assumed to be 0 if y is not provided.
matrix(): It enumerates a transformation in the form of a transformation matrix of six values.

Example 1: Below is the example that illustrated the use of the transform attribute using rotate(), translate(), skewX(), and scale() transform function.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; font-size:50px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="-25 0 450 400" 
        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" f 
            ill="none" stroke="green" /> 
    </svg> 
  
</body> 
  
</html> 

Output:

Example 2: Below is the example that illustrated the use of the transform attribute using scale transform function.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; font-size:50px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="-60 -40 400 400" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <circle cx="0" cy="0" r="10" 
            fill="green" transform="scale(4)" /> 
  
        <circle cx="0" cy="0" r="10" 
            fill="yellow" transform="scale(1, 4)" /> 
  
        <circle cx="0" cy="0" r="10" 
            fill="lightgreen" transform="scale(4, 1)" /> 
  
        <circle cx="0" cy="0" r="10" fill="green" /> 
    </svg> 
</body> 
  
</html> 