如何移动SVG锚点且不改变SVG高度？React组件实现问询

问题分析 #

你当前的代码仅修改了贝塞尔曲线中间锚点的垂直偏移量，但后续曲线的偏移值固定不变，导致整个SVG的终点位置随滑块变动，破坏了整体高度。要实现仅移动最宽点、保持SVG高度不变，需要同步调整后续曲线的偏移参数，确保路径的起点和终点垂直位置固定。

核心思路 #

1. 固定路径的起点（y=0.25）和最终终点的垂直位置（原路径计算得y=69.25），确保总高度不变。
2. 当中间最宽点的垂直偏移量变化时，计算后续曲线的新偏移值，让最终终点回到固定位置。
3. 保持后续曲线的控制点比例不变，维持原有的曲线形状。

修改后的代码 #

import { useState } from 'react';

function WingSvg() {
  // 初始化状态：anchorHeight对应滑块值，sliderAnchorHeight是放大10倍的垂直偏移
  const [anchorHeight, setAnchorHeight] = useState(3.34);
  const [halfPathRight, setHalfPathRight] = useState(`m.25.25c2,1.4,10.7,8.9,10.7,33.4,0,25.7-6.4,38.6-6.4,38.6,0,0-2.9-.3-4.3-3`);
  const [sliderAnchorHeight, setSliderAnchorHeight] = useState(33.4);

  const handleAnchorHeight = (e) => {
    const newAnchorHeight = parseFloat(e.target.value);
    const newSliderAnchorHeight = newAnchorHeight * 10;
    
    // 固定最终终点的y坐标，确保总高度不变
    const originalFinalY = 0.25 + 33.4 + 38.6 - 3; // 计算原路径最终终点的y值：69.25
    const newS1Y = 0.25 + newSliderAnchorHeight; // 新的中间最宽点y坐标
    const newS2Y = originalFinalY + 3; // 第二段曲线终点的y值（因为第三段要减3回到固定终点）
    
    // 计算第二段曲线的垂直偏移量
    const newDy2 = newS2Y - newS1Y;
    // 保持控制点的比例，维持曲线形状
    const controlRatio = 25.7 / 38.6; // 原控制点偏移与第二段总偏移的比例
    const newControlDy = newDy2 * controlRatio;

    // 更新路径状态
    setAnchorHeight(newAnchorHeight);
    setSliderAnchorHeight(newSliderAnchorHeight);
    setHalfPathRight(`m.25.25c2,1.4,10.7,8.9,10.7,${newSliderAnchorHeight.toFixed(2)},0,${newControlDy.toFixed(2)},-6.4,${newDy2.toFixed(2)},-6.4,${newDy2.toFixed(2)},0,0,-2.9-.3-4.3-3`);
  };

  return (
    <div>
      <label>Slider anchor height</label>
      <input 
        type="range" 
        id="right-wing" 
        name="right-wing" 
        value={anchorHeight} 
        min="2" 
        max="4" 
        step={0.01} 
        onChange={handleAnchorHeight}
      />
      
      <div style={{ marginRight: '200px' }}>
        <svg 
          xmlns="http://www.w3.org/2000/svg" 
          height="500" 
          width="100" 
          viewBox="0 0 11.2 100" 
          style={{ marginLeft: "-22px" }}
        >
          <defs>
            <style>{`.cls-1 {
              fill: none;
              stroke: #000;
              stroke-linecap: round;
              stroke-linejoin: round;
              stroke-width: .5px;
            }`}</style>
          </defs>
          <g transform="translate(0, 10)">
            <path className="cls-1" d={halfPathRight}/>
          </g>
        </svg>
      </div>
    </div>
  );
}

export default WingSvg;

关键修改说明 #

• 修复异步状态问题：直接使用临时变量newSliderAnchorHeight构建路径，避免依赖useState的异步更新导致的旧值错误。
• 动态计算后续偏移：通过固定最终终点的y坐标，反向推导第二段曲线的垂直偏移量，确保总高度不变。
• 维持曲线形状：保留原控制点与总偏移的比例，让调整后的曲线与原形状保持一致，仅上下平移后续段。

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