如何创建可自动适配不同宽高的新SVG路径

要实现SVG路径的自适应缩放，核心是根据不同的路径命令（M/L/C/A等），对对应的坐标参数应用x、y缩放比例，非坐标类参数（比如椭圆弧的旋转角、弧类型标记）保持不变。

核心处理逻辑 #

在forEach循环里，你需要完成这几步：

1. 取出当前的路径命令和对应的参数字符串
2. 拆分参数为单个数值，区分哪些需要缩放x、y，哪些不需要
3. 对需要缩放的数值应用对应的xScale或yScale
4. 把命令和处理后的参数重新拼接到newPath中

完整代码实现 #

let w = window.innerWidth;
let h = document.querySelector("main").offsetHeight;

const pathSpec = "M305.91,0c8.54,101.44,17.07,203.69,5.27,304.8s-45.5,202.26-112.37,279c-...";

const yScale = h / 8000;
const xScale = w / 200;

let newPath = "";

// 匹配所有路径命令和对应的参数
const pathBits = pathSpec.matchAll(/([MmLlHhVvCcSsQqTtAa])([\d\.,\se-]*)/g);

pathBits.forEach((bit) => {
    const command = bit[1];
    const params = bit[2].trim();
    if (!params) {
        newPath += command;
        return;
    }

    // 拆分参数，兼容空格、逗号分隔的情况
    const paramList = params.split(/[\s,]+/).filter(p => p !== '').map(Number);
    let processedParams = [];

    switch (command.toUpperCase()) {
        // 移动/直线命令：M/m/L/l 处理x,y坐标对
        case 'M':
        case 'L':
            for (let i = 0; i < paramList.length; i += 2) {
                processedParams.push(paramList[i] * xScale);
                processedParams.push(paramList[i+1] * yScale);
            }
            break;
        // 水平直线：H/h 仅处理x坐标
        case 'H':
            processedParams = paramList.map(p => p * xScale);
            break;
        // 垂直直线：V/v 仅处理y坐标
        case 'V':
            processedParams = paramList.map(p => p * yScale);
            break;
        // 三次贝塞尔曲线：C/c/S/s 处理多组(x1,y1,x2,y2,x,y)
        case 'C':
        case 'S':
            for (let i = 0; i < paramList.length; i += 6) {
                processedParams.push(paramList[i] * xScale);
                processedParams.push(paramList[i+1] * yScale);
                processedParams.push(paramList[i+2] * xScale);
                processedParams.push(paramList[i+3] * yScale);
                processedParams.push(paramList[i+4] * xScale);
                processedParams.push(paramList[i+5] * yScale);
            }
            break;
        // 二次贝塞尔曲线：Q/q/T/t 处理多组(x1,y1,x,y)
        case 'Q':
        case 'T':
            for (let i = 0; i < paramList.length; i += 4) {
                processedParams.push(paramList[i] * xScale);
                processedParams.push(paramList[i+1] * yScale);
                processedParams.push(paramList[i+2] * xScale);
                processedParams.push(paramList[i+3] * yScale);
            }
            break;
        // 椭圆弧命令：A/a 仅缩放rx/ry/x/y，旋转角和标记参数保留原数值
        case 'A':
            for (let i = 0; i < paramList.length; i += 7) {
                processedParams.push(paramList[i] * xScale);
                processedParams.push(paramList[i+1] * yScale);
                processedParams.push(paramList[i+2]);
                processedParams.push(paramList[i+3]);
                processedParams.push(paramList[i+4]);
                processedParams.push(paramList[i+5] * xScale);
                processedParams.push(paramList[i+6] * yScale);
            }
            break;
        default:
            processedParams = paramList;
            break;
    }

    // 拼接命令和处理后的参数
    newPath += command + processedParams.join(',');
});

// 最终将newPath赋值给SVG路径元素的d属性即可
// document.querySelector('path').setAttribute('d', newPath);

注意事项 #

• 命令大小写不影响缩放逻辑：小写命令是相对坐标，大写是绝对坐标，线性缩放对两种坐标都适用
• 参数拆分兼容多种分隔符：SVG路径参数支持空格或逗号分隔，代码里做了兼容处理
• 椭圆弧的特殊参数：旋转角、大弧标记、顺时针标记属于非坐标参数，不需要缩放

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