如何沿X轴拉伸SVG背景图并保持垂直位置及中间占比？

问题根源 #

你的SVG默认使用preserveAspectRatio="xMidYMid meet"，会强制保持3:1的固有宽高比（viewBox为600×200）。当容器宽度超过600px时，SVG不会拉伸填满容器，而是居中显示为600px宽，导致条形宽度固定，无法随容器宽度保持中间三分之一的比例。

修复代码 #

function BackgroundSVG() {
  let outerDiv = {
    position: "relative",
    border: "3px solid red",
    minWidth: "300px" // 方便测试拉伸效果
  };

  let svgStyle = {
    position: "absolute",
    top: "0",
    left: "0", // 确保SVG从容器左侧开始填充
    border: "3px solid pink",
    zIndex: -1,
    width: "100%",
    height: "200px"
  };

  return (
    <div style={outerDiv}>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <svg
        style={svgStyle}
        viewBox="0 0 100 200"
        preserveAspectRatio="none" // 取消宽高比限制，让SVG完全填充容器
        xmlns="http://www.w3.org/2000/svg"
      >
        {/* 用比例坐标定义条形，33.33到66.66对应水平中间三分之一 */}
        <path d="M 33.33 100 H 66.66" strokeWidth={12} stroke="blue" vectorEffect="non-scaling-stroke" />
      </svg>
    </div>
  );
}

关键修改点 #

1. preserveAspectRatio="none"：强制SVG拉伸填满容器的宽高，不再保持固有比例；
2. 比例化viewBox：将viewBox设为0 0 100 200，水平轴用0-100的比例坐标，垂直轴保持固定高度；
3. 相对坐标定义条形：path从33.33（1/3位置）到66.66（2/3位置），确保始终占据水平中间三分之一；
4. 可选vectorEffect="non-scaling-stroke"：防止线条宽度随SVG拉伸而变化，保持粗细一致；
5. 添加left:0：确保SVG从容器左侧开始填充，避免位置偏移。

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