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:
Please Login to comment...