Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

SVG transform Attribute

  • Last Updated : 03 Nov, 2020

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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
Recommended Articles
Page :