SVG UseElement.x Property
Last Updated :
30 Mar, 2022
The SVG UseElement.x property returns an SVGAnimatedLength object corresponding to the attribute of the given use element
Syntax:
UseElement.x
Return value: This property returns SVGAnimatedLength object that can be used to get the x of the use element.
Example 1:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "400" height = "400"
< circle id = "gfg"
cx = "100"
cy = "100"
r = "40"
fill = "green" />
< use href = "#gfg" x = "110" y = "200" id = "useid" ></ use >
< script type = "text/javascript" >
var u = document.getElementById("useid");
console.log(u.x);
console.log(u.x.animVal.value)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "800" height = "800"
< rect id = "gfg"
x = "100"
y = "100"
height = "150"
width = "150"
fill = "green" />
< use href = "#gfg" x = "200" y = "200" id = "useid" ></ use >
< script type = "text/javascript" >
var u = document.getElementById("useid");
console.log(u.x);
console.log(u.x.animVal.value)
</ script >
</ svg >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...