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

JavaScript025

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

方法/步骤

找到后缀名为.svg格式的文件，我尝试用PS、AI打开都失败啦。

无奈之下，我想到了开发者工具，我打开网页，在键盘上按下F12，找到【Resource】并点击。

进入Resource下，找到【Frames】,并展开里面的内容。

在里面的内容中，我们找到【FONTS】，这个就是字体的意思。

5

展开FONTS，我们会看到那个后缀名为.svg的文件，用鼠标左键点击这个文件，里面的内容会显示在右边。