Skip to content
Related Articles

Related Articles

SVG transform Attribute

Improve Article
Save Article
  • Last Updated : 31 Mar, 2022
Improve Article
Save Article

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>

Output:


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!