论坛 › 马黑黑教程专版 › 路径适配svg尺寸的简单方法

马黑黑 发表于 2025-8-23 10:09

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

<style>
        .artBox { font-size: 18px; }
        .artBox > p { margin: 10px 0; line-height: 30px; }
        .artBox mark { padding: 4px 6px; background: lightblue; }
        .artBox h5 { font-size: 18px; margin: 6px 0; }
</style>

<div id="prevBox"></div>
<div class="artBox">
        <p>svg路径的设计都是实打实的尺寸，一般以px像素做距离单位，因此路径运行的空间都是定死的。为了让路径能适应svg的实际尺寸，最简单的做法是借助svg的 viewbox 属性。下面的例子，路径是在 400*400 的空间上设计，是 viewbox 的空间，svg自身的尺寸则为 600*600，能完美渲染尺寸固定的路径。</p>
        <div class="codebox" data-prev="1">
&lt;svg id="msvg" width="600" height="600" viewbox="0 0 400 400"&gt;
        &lt;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" /&gt;
&lt;/svg&gt;
        </div>
        <p>只要svg的宽高设置成比例和viewbox的一致，上述示例就能成立。有时，可能需要在一个宽高比例不一致svg中使用路径，又希望路径的效果渲染符合路径的尺寸比例，可以考虑 use 标签，因为该标签可以设置尺寸。</p>
        <p>以上方法除了处理路径问题，实际上也可以处理任意图像：图像总是在 viewbox 的范围内设计，就像路径一样，然后确保svg的宽高比和viewbox的宽高比相一致。</p>
</div>

<script type="module">
        import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
        linenumber();
</script>

马黑黑 发表于 2025-8-23 10:10

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

花飞飞 发表于 2025-8-23 11:51

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

花飞飞 发表于 2025-8-23 11:54

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

梦江南 发表于 2025-8-23 12:37

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

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

马黑黑 发表于 2025-8-23 13:05

花飞飞 发表于 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 13:05

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

看 6 楼

马黑黑 发表于 2025-8-23 13:06

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

是的用过

红影 发表于 2025-8-23 13:13

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

红影 发表于 2025-8-23 13:15

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

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

马黑黑 发表于 2025-8-23 17:43

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

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

马黑黑 发表于 2025-8-23 17:44

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

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

花飞飞 发表于 2025-8-23 18:17

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

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

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

花飞飞 发表于 2025-8-23 18:18

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

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

花飞飞 发表于 2025-8-23 19:18

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

{:4_187:}问好梦江南

马黑黑 发表于 2025-8-23 19:48

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

马黑黑 发表于 2025-8-23 19:48

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

理解正确

杨帆 发表于 2025-8-23 19:55

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

谢谢马老师经典讲授与精彩分享{:4_191:}

马黑黑 发表于 2025-8-23 20:45

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

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

对，简单但很巧妙

杨帆 发表于 2025-8-23 21:00

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

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

查看完整版本: 路径适配svg尺寸的简单方法