如何用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸

Question

如何用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸

Answer 1

用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸的方法:
1、使用getElementById获取svg节点对象：
var el = document.getElementById("yourElement");
2、调用getBoundingClientRect获取path的边界矩形的位置：
var rect = el.getBoundingClientRect();
3、分别获取width和height属性就得到实际位置了。

console.log( rect.width );
console.log( rect.height);

Answer 2

　可以通过获取g标签的第一个子节点，用它的x,y坐标。或者把g标签换成svg标签，这样可以获取x,y的坐标值。
　　<svg >
　　<svg id="g1" x=20 y=20>
　　<rect id="1"></rect>
　　<rect id="2"></rect>
　　<rect id="3"></rect>
　　</svg>
　　<svg >
　　document.getElementById("g1").x.animVal.value;