Skip to content
Related Articles

Related Articles

SVG LinearGradientElement.y2 Property
  • Last Updated : 26 Nov, 2020

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

Syntax:

LinearGradientElement.y2

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

Example 1: 

HTML




<!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.y2);
        </script>
    </svg>
</body>
  
</html>

Output:



Example 2: 

HTML




<!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.y2);
        </script>
    </svg>
</body>
  
</html>

Output:

Example 3: 

HTML




<!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.y2);
        </script>
    </svg>
</body>
  
</html>

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :