SVG LinearGradientElement.x2 Property
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" <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" <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" <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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
