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

JavaScript011

如何用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸,第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)

解决方法：

A）让伺，服，器代为读取这些外部资源，使它们变成同网域的资料。

B）用　JS 建立 img，将其 crossOrigin 特性设成 *anonymous*，再请求 SVG。如果对方的伺，服，器有明确允许(有设定正确的　Access-Control-Allow-Origin)，并且该 SVG 没有引用任何外部资源，并且浏览器支援，那麼载入后你可以用 JS 存取其内部资料。