Open In App
Related Articles

SVG LinearGradientElement.x2 Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The SVG LinearGradientElement.x2 Property Returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element.

Syntax:

LinearGradientElement.x2

Return value: This property returns SVGAnimatedLength object that can be used get the x2 the LinearGradient element.

Example 1:

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 200 200" 
         xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gfg" gradientTransform="rotate(70)"
                    x1="0%" x2="20%" y1="0%" y2="20%">
      <stop offset="10%"  stop-color="blue" />
      <stop offset="90%" stop-color="green" />
    </linearGradient>
  </defs>
  
  <circle cx="20" cy="20" r="20" fill="url('#gfg')" />
      <script>
          var a=document.getElementById("gfg");
          console.log(a.x2);
      </script>
</svg>
</body>
  
</html>

                    

Output:

Example 2:

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 500 500" 
         xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gfg" 
                    gradientTransform="rotate(70)"
                    x1="0%" x2="20%" y1="0%" y2="20%">
      <stop offset="10%"  stop-color="blue" />
      <stop offset="90%" stop-color="green" />
    </linearGradient>
  </defs>
  
  <ellipse cx="100" cy="70" rx="80" 
           ry="50" fill="url('#gfg')" />
      <script>
          var a=document.getElementById("gfg");
          console.log(a.x2);
      </script>
</svg>
</body>
  
</html>

                    

Output:

Example 3:

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 500 500" 
         xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gfg" 
                    gradientTransform="rotate(70)" 
                    x1="0%" x2="20%" 
                    y1="0%" y2="20%">
      <stop offset="10%"  stop-color="blue" />
      <stop offset="90%" stop-color="green" />
    </linearGradient>
  </defs>
  
  <rect height="80" width="80" x="30"
        y="30" fill="url('#gfg')" />
      <script>
          var a=document.getElementById("gfg");
          console.log(a.x2);
      </script>
</svg>
</body>
  
</html>

                    

Output:



Last Updated : 30 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads