The SVG LinearGradientElement.y1 Property Returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element.
Syntax:
LinearGradientElement.y1
Return value: This property returns SVGAnimatedLength object that can be used get the y1 the LinearGradient element
Example 1:
<!DOCTYPE html> < html >
< body >
< svg viewBox = "0 0 200 200" < defs >
< linearGradient id = "gfg" gradientTransform = "rotate(70)" x1 = "20%" x2 = "0%" y1 = "20%" y2 = "0%" >
< 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.y1);
</ 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 = "20%" x2 = "0%"
y1 = "20%" y2 = "0%" >
< 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.y1);
</ 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 = "20%" x2 = "0%" y1 = "20%" y2 = "0%" >
< 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.y1);
</ script >
</ svg >
</ body >
</ html >
|
Output: