路径适配svg尺寸的简单方法

马黑黑

svg路径的设计都是实打实的尺寸，一般以px像素做距离单位，因此路径运行的空间都是定死的。为了让路径能适应svg的实际尺寸，最简单的做法是借助svg的 viewbox 属性。下面的例子，路径是在 400*400 的空间上设计，是 viewbox 的空间，svg自身的尺寸则为 600*600，能完美渲染尺寸固定的路径。

<svg id="msvg" width="600" height="600" viewbox="0 0 400 400"> <path d="M200 200 C50 0,350 0,200 200 C50 400,350 400,200 200 C0 50,0 350,200 200 C400 50,400 350,200 200" fill="green" /> </svg>

只要svg的宽高设置成比例和viewbox的一致，上述示例就能成立。有时，可能需要在一个宽高比例不一致svg中使用路径，又希望路径的效果渲染符合路径的尺寸比例，可以考虑 use 标签，因为该标签可以设置尺寸。

以上方法除了处理路径问题，实际上也可以处理任意图像：图像总是在 viewbox 的范围内设计，就像路径一样，然后确保svg的宽高比和viewbox的宽高比相一致。

马黑黑

改变svg的尺寸，只要保证宽高比和 viewbox 设计的相一致，路径画出的图案就能可大可小呈现

花飞飞

这个有意思，把600改成比400小的数，照样可以按比例完美显示。。。
感觉这个现象是用过的，比如你小播是路径画出来的，大小也可以随意更改

花飞飞

viewbox="0 0 400 400"这里又有四个值了。。两个400是宽和高，前两个干嘛呢。

梦江南

花飞飞 发表于 2025-8-23 11:54
viewbox="0 0 400 400"这里又有四个值了。。两个400是宽和高，前两个干嘛呢。

飞飞老师问得好，我也有这个困惑。

马黑黑

花飞飞 发表于 2025-8-23 11:54
viewbox="0 0 400 400"这里又有四个值了。。两个400是宽和高，前两个干嘛呢。

原点坐标。就是，它所指定的绘画区域是一个矩形，矩形有宽高，也得有矩形左上角的坐标位置。一般的设置，其实坐标点都是 0 0，在 viewbox 属性中，可以根据需要设置，例如：

-200 -200 400 400

这样，在其上画个圆，圆形可以是 0，很方便：

<circle cx="0" cy="0" r="190" fill="pink" />

马黑黑

梦江南 发表于 2025-8-23 12:37
飞飞老师问得好，我也有这个困惑。

看 6 楼

马黑黑

花飞飞 发表于 2025-8-23 11:51
这个有意思，把600改成比400小的数，照样可以按比例完美显示。。。
感觉这个现象是用过的，比如你小播是路 ...

是的用过

红影

viewbox 属性可以缩放svg图形呢，只要设置是按比例的。

红影

马黑黑 发表于 2025-8-23 13:05
原点坐标。就是，它所指定的绘画区域是一个矩形，矩形有宽高，也得有矩形左上角的坐标位置。一般的设置， ...

嗯嗯，学习了，例子里的圆把左上角设置为反向的半径大小，圆心就可以在0 0 点了

马黑黑

红影 发表于 2025-8-23 13:15
嗯嗯，学习了，例子里的圆把左上角设置为反向的半径大小，圆心就可以在0 0 点了

实际上就是把坐标原点转到矩形的中心，和HTML的一样（但又不完全一样，尺寸的衡量机制跟着改变，左上角的坐标变为了 -200 -200）。外接圆只是一个参考。

马黑黑

红影 发表于 2025-8-23 13:13
viewbox 属性可以缩放svg图形呢，只要设置是按比例的。

在 viewbox 中绘制，在 svg 画布上渲染

花飞飞

马黑黑 发表于 2025-8-23 13:05
原点坐标。就是，它所指定的绘画区域是一个矩形，矩形有宽高，也得有矩形左上角的坐标位置。一般的设置， ...

你写成-200 -200 400 400这个就见过了，以前有段时间常用，有点印象。
如果400这个正方形的左上角是-200 -200 ，那 cx="0" cy="0"的位置就是在正中间，

如果左上角还 写成0 0，cx=200  cy=200,画出来也是一样的效果..
后者比较好理解吧

花飞飞

马黑黑 发表于 2025-8-23 13:06
是的用过

用不用过不知道，这种现象见过

花飞飞

梦江南 发表于 2025-8-23 12:37
飞飞老师问得好，我也有这个困惑。

问好梦江南

马黑黑

花飞飞 发表于 2025-8-23 18:18
用不用过不知道，这种现象见过

因为用过，所以见过

马黑黑

花飞飞 发表于 2025-8-23 18:17
你写成-200 -200 400 400这个就见过了，以前有段时间常用，有点印象。
如果400这个正方形的左上角是-200 ...

理解正确

杨帆

厉害！这样就可以根据需要改变svg尺寸了

谢谢马老师经典讲授与精彩分享

马黑黑

杨帆 发表于 2025-8-23 19:55
厉害！这样就可以根据需要改变svg尺寸了

谢谢马老师经典讲授与精彩分享

对，简单但很巧妙

杨帆

马黑黑 发表于 2025-8-23 20:45
对，简单但很巧妙

对您帖子里这个SVG图咋无效呢？History of Love
https://www.huachaowang.com/foru ... 99&fromuid=7894
(出处: 花潮论坛)