如何让SVG组件基于宽高比通过viewBox实现容器宽度自适应？

我编写了一个ResponsiveSVG组件，希望它能在保持原有宽高比的同时适配容器全宽度。桌面端显示正常，但移动端异常——当前计算让viewBox的宽高与传入的实际宽高完全一致，导致没有实现自适应效果，viewBox坐标与视口完全相同。

原组件代码：

export function ResponsiveSVG({
  height,
  width,
  children,
  origin = { x: 0, y: 0 },
  preserveAspectRatio = "xMidYMid meet",
  innerRef,
  className,
  ...props
}: ResponsiveSVGProps): JSX.Element {
  const aspect = height === 0 ? 1 : width / height;

  const adjustedHeight = Math.ceil(width / aspect);

  return (
    <div
      data-testid="cutting-svg-container"
      style={{
        position: 'relative',
        overflow: 'visible',
        height: '1px',
      }}
    >
      <svg
        style={{ overflow: 'visible' }}
        className={className}
        preserveAspectRatio={preserveAspectRatio}
        width={width}
        height={adjustedHeight}
        viewBox={`${origin.x} ${origin.y} ${width} ${height}`}
        ref={innerRef}
        {...props}
      >
        {children}
      </svg>
    </div>
  );
}

使用方式：

<ResponsiveSVG width={width} height={height}>
  <circle cx={width / 2} cy={height / 2} r={radius} />
</ResponsiveSVG>

核心问题分析 #

1. SVG元素使用固定width值，无法随容器宽度自适应缩放
2. 容器div的height: 1px限制了SVG的显示空间，导致高度计算异常
3. 基于固定传入值计算adjustedHeight，未关联容器实际宽度

修改后的组件代码 #

export function ResponsiveSVG({
  height,
  width,
  children,
  origin = { x: 0, y: 0 },
  preserveAspectRatio = "xMidYMid meet",
  innerRef,
  className,
  ...props
}: ResponsiveSVGProps): JSX.Element {
  const aspectRatio = height === 0 ? 1 : width / height;

  return (
    <div
      data-testid="cutting-svg-container"
      style={{
        position: 'relative',
        width: '100%',
        height: 0,
        paddingTop: `${(1 / aspectRatio) * 100}%`,
        overflow: 'visible',
      }}
    >
      <svg
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          overflow: 'visible',
        }}
        className={className}
        preserveAspectRatio={preserveAspectRatio}
        viewBox={`${origin.x} ${origin.y} ${width} ${height}`}
        ref={innerRef}
        {...props}
      >
        {children}
      </svg>
    </div>
  );
}

关键修改说明 #

• 容器布局优化：设置width:100%让容器占满父元素宽度，用padding-top百分比（基于父元素宽度计算）维持传入的宽高比，替代固定高度，确保容器高度随宽度自适应
• SVG响应式设置：将SVG设为绝对定位，width:100%和height:100%让它完全填充容器，同时保留原始viewBox值，让preserveAspectRatio正确缩放SVG内容，保持原有比例
• 移除冗余计算：不再需要基于固定值计算adjustedHeight，容器的padding-top已经自动维护了宽高比

修改后，组件会自动适配容器宽度，同时保持SVG内容的原始宽高比，移动端和桌面端都能正常显示。

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