如何重绘SVG路径以适配容器宽度？SVG新手适配窗口问题求助

嘿，刚接触SVG遇到这种适配问题真的超常见，别慌！我来帮你搞定让SVG占窗口50%且图形不拉伸的需求～

核心问题：为什么你的图形会拉伸？ #

最可能的原因是你没给SVG设置viewBox属性。SVG如果没有这个属性，就会直接拉伸填满你设置的宽高，完全不考虑原始图形的比例。viewBox就像是给SVG定义了一个“虚拟画布”，图形都在这个画布上绘制，之后容器的宽高只是决定这个画布显示的大小，这样图形就能等比例缩放啦！

具体解决方案步骤 #

• 第一步：给SVG添加viewBox属性
  先确定你SVG图形的原始尺寸（比如用浏览器开发者工具查看SVG的默认宽高，或者你绘制时的画布大小），假设你的图形原始宽是800、高是600，那就在SVG标签里加上：

  <svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
    <!-- 你的swoop图形代码 -->
  </svg>
  

  preserveAspectRatio是确保图形在容器里居中且保持比例，默认就是这个值，但明确写出来更稳妥。

• 第二步：设置SVG的尺寸样式
  这里有两种方式，选一种就行：

  1. 纯CSS（更简单，不用JS）
     直接给SVG加CSS样式，用视窗单位vw来实现窗口50%宽度：

     svg {
       width: 50vw; /* 宽度是视窗宽度的50% */
       height: auto; /* 高度自动适配，保持图形比例 */
       max-width: 100%; /* 防止小屏幕下超出容器 */
     }
     

     这种方式不需要监听resize事件，浏览器会自动适配。

  2. 用jQuery监听resize（按你的需求）
     如果一定要用resize事件来动态设置，代码可以这么写：

     $(document).ready(function() {
       // 定义resize处理函数
       function adjustSVGSize() {
         var halfWindowWidth = $(window).width() * 0.5;
         $('svg').width(halfWindowWidth);
         // 高度不用手动设置，viewBox会自动按比例调整
       }
       // DOM就绪时立即执行一次
       adjustSVGSize();
       // 监听窗口resize事件
       $(window).on('resize', adjustSVGSize);
     });
     

     这里要注意：不要给SVG设置固定高度，让它自动根据viewBox的比例计算，不然还是会拉伸。

额外小提示 #

如果你的swoop图形是用<path>绘制的，要确保viewBox的范围能完全包含整个路径，不然图形可能会被裁剪。可以用开发者工具选中SVG，查看它的bbox（边界框），把viewBox设成对应的数值就好啦。

内容的提问来源于stack exchange，提问作者Damon