如何拉伸SVG Path以适配窗口高度？

问题根源在于原SVG的path使用固定垂直坐标，且preserveAspectRatio设置强制保持方形比例，导致无法垂直拉伸。以下是具体修复方案：

1. 优化SVG基础配置 #

先调整SVG核心属性，允许其完全适配容器宽高：

<svg class="svgwave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 301 301" preserveAspectRatio="none" style="width: 100%; height: 100%;">
    <path id="wavepath" style="fill: transparent; stroke: transparent; stroke-width: 1px;"></path>
    <text text-anchor="left">
        <textPath id="textPathEl" style="fill-opacity: 1;" href="#wavepath" side="left" startOffset="0%">
            <animate attributeName="startOffset" from="20%" to="42%" begin="0s" dur="12s" repeatCount="indefinite"></animate>
            Some text Some textSome textSome text  Some text Some text Some text Some text
        </textPath>
    </text>
</svg>

• 将preserveAspectRatio改为none：取消原方形比例限制，让SVG完全拉伸适配容器
• 用CSS控制宽高为100%：让SVG继承父容器的尺寸

2. 动态生成适配高度的路径 #

通过JS实时计算容器高度，生成对应比例的path路径，避免固定坐标导致的变形：

function updateWavePath() {
    const svgEl = document.querySelector('.svgwave');
    const pathEl = document.getElementById('wavepath');
    const textPathEl = document.getElementById('textPathEl');
    
    // 获取SVG当前实际宽高
    const { width: svgWidth, height: svgHeight } = svgEl.getBoundingClientRect();
    
    // 圆角参数（基于原设计的视觉比例）
    const cornerOffset = 12; // 圆角距离边缘的间距
    const cornerRadius = 12; // 圆角半径
    
    // 计算当前高度下的关键坐标
    const topY = svgHeight;
    const topRoundY = svgHeight - cornerOffset;
    const bottomRoundY = cornerOffset;
    const bottomY = 0;
    
    // 单段路径模板（与原路径结构一致）
    const segment = `M ${svgWidth/2} ${topY} H ${cornerRadius} 
                      C ${cornerRadius/2} ${topY} 0 ${topRoundY} 0 ${topRoundY} 
                      V ${bottomRoundY} 
                      C 0 ${bottomRoundY} ${cornerRadius/2} ${bottomY} ${cornerRadius} ${bottomY} 
                      H ${svgWidth - cornerRadius} 
                      C ${svgWidth - cornerRadius/2} ${bottomY} ${svgWidth} ${bottomRoundY} ${svgWidth} ${bottomRoundY} 
                      V ${topRoundY} 
                      C ${svgWidth} ${topRoundY} ${svgWidth - cornerRadius/2} ${topY} ${svgWidth - cornerRadius} ${topY} 
                      H ${svgWidth/2}`;
    
    // 拼接4段重复路径（保持原文本滚动的循环长度）
    pathEl.setAttribute('d', Array(4).fill(segment).join(' '));
    
    // 同步更新文本长度，匹配路径总长度
    textPathEl.setAttribute('textLength', pathEl.getTotalLength());
}

// 初始化执行
updateWavePath();
// 监听窗口/容器尺寸变化，实时更新
window.addEventListener('resize', updateWavePath);

方案说明 #

• 取消固定坐标：所有垂直坐标基于SVG当前高度动态计算，保证路径随高度拉伸
• 保留原视觉结构：圆角大小、路径分段逻辑与原设计一致，仅适配尺寸变化
• 实时同步文本长度：避免因路径长度变化导致的文本错位或拉伸变形

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