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

JavaScript024

如何用 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 存取其内部资料。

会不会是那一行有个别字母包含了其他的东西，我经常复制粘贴时也遇到这种情况，把SVG_1这行删了，再从上面一行复制一行下去试下。因为看到SVG_1这行好像没有被加入STYLE。IF这里也做了复重判断了，不是0就是1，不是1时还要判断是不是0？这代码不要写得太复杂了