JS：获取svg路径设计坐标及宽高数据

马黑黑 · 发表于 2025-8-26 12:25

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

对复杂的svg路径，我们可能很难一眼瞧出它的实际占位情况，而我们总是希望路径的应用应该能适应svg的尺寸。为此，我们有必要事先获取svg路径是在什么宽高范围内进行设计，即弄懂path路径的x、y、width 和 height 的实值。JS内置的 getBBox() 函数能帮我们做到这一点，其语法非常简单：

SVGElement.getBBox();

任意拥有空间占位属性的svg内的元素，都可以使用 getBBox() 函数获取到类似于对象集合{x: x, y: y, width: width, height: height}的数据。通常，x、y 的值要分别考虑其右、其下的占位以寻求边界的均衡，在计算路径占位的时候 x、y 的值应乘以 2，这才是路径的实际占位情况。下面的例子，使用 svgdr 绘制一个路径图案，获取路径的起点坐标和宽高，然后依据坐标和宽高值给 svg 设置 viewBox 属性，这样所绘制的图像能够依据 svg 事先设置的宽高尺寸进行适配。

如果追求绝对的适配，可以参考上述代码获得 ww 和 hh 的实际数值，根据此数值重新考虑 svg 标签的 width、height 属性如何设置，并将 viewBox 一并写好，后面的JS就无需 dr.setsvg 指令了。

马黑黑 · 发表于 2025-8-26 12:28

这个路径是从阿里巴巴icon图标站那里拿到的，它设计于靠近 1024*1024 的平面范围。

马黑黑 · 发表于 2025-8-26 12:29

阿里巴巴矢量图标库：https://www.iconfont.cn/

杨帆 · 发表于 2025-8-26 12:46

点预览就是一个几何图形呀，看不到svg路径设计坐标及宽高数据呀

花飞飞 · 发表于 2025-8-26 12:54

马黑黑发表于 2025-8-26 12:28
这个路径是从阿里巴巴icon图标站那里拿到的，它设计于靠近 1024*1024 的平面范围。

就是原来1024*1024大小的SVG盾牌图案，通过这个函数自动调整大小适用于400*400的窗口
很智能。。。

马黑黑 · 发表于 2025-8-26 13:00

花飞飞发表于 2025-8-26 12:54
就是原来1024*1024大小的SVG盾牌图案，通过这个函数自动调整大小适用于400*400的窗口
很智能。。。{:4_1 ...

这是实现适配的思路之一

马黑黑 · 发表于 2025-8-26 13:02

杨帆发表于 2025-8-26 12:46
点预览就是一个几何图形呀，看不到svg路径设计坐标及宽高数据呀

你可以打印出来。获取到 ww 和 hh 后：

console.log(ww, hh);

这就在控制台打印出结果

花飞飞 · 发表于 2025-8-26 13:12

ww = od.x * 2 + od.width,
hh = od.y * 2 + od.height;
这样看比较好比较，
视窗的宽度ww，除了路径本身宽度width之外，还要加上原来2个x边距，才能保证左右两边都距离一样。

viewBox: `0 0 ${ww} ${hh}`});就是从原点开始，到之前设置好的视窗宽ww高hh大小。