如何用 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;