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