SVG LinearGradientElement.x2 Property
Last Updated :
30 Mar, 2022
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...