SVG圆角多边形组件架构：缩放时保持描边宽度恒定

问题根源 #

当前组件的strokeWidth是基于SVG的viewBox（2048x2048）坐标系统定义的。当SVG被包裹在小尺寸div中时，整个坐标系统会按比例缩放，导致描边宽度也跟着缩小。比如缩放到256x256时，缩放比例为1/8，原本8单位的描边实际仅显示1px，几乎不可见。

解决方案一：使用vector-effect: non-scaling-stroke（推荐） #

这个CSS属性可以让SVG描边宽度不受缩放变换影响，始终保持传入的像素值。

修改步骤： #

1. 调整多边形顶点计算，去掉strokeWidth对半径的影响（因为描边不再占用viewBox空间）
2. 给<polygon>添加vector-effect: non-scaling-stroke样式

修改后的完整组件代码：

import { useMemo } from 'react'

export const SIZE = 2048

export const CENTER = SIZE / 2

const ANGLE = -Math.PI / 2 // 第一个顶点从顶部中心开始

type PolygonInput = {
  sides: number
  stroke?: string
  strokeWidth?: number
  fill?: string
  rotation?: number // 旋转角度（度）
}

export function computePolygonPoints({
  radius,
  centerX,
  centerY,
  sides,
}: {
  radius: number
  centerX: number
  centerY: number
  sides: number
}) {
  return Array.from({ length: sides }, (_, i) => {
    const angle = (i * 2 * Math.PI) / sides + ANGLE
    const x = centerX + radius * Math.cos(angle)
    const y = centerY + radius * Math.sin(angle)
    return { x, y }
  })
}

const Polygon: React.FC<PolygonInput> = ({
  sides,
  stroke = 'black',
  strokeWidth = 0,
  fill = 'black',
  rotation = 0,
}) => {
  if (sides < 3 || sides > 360) {
    throw new Error('边数必须在3到360之间')
  }

  const points = useMemo(() => {
    const points = computePolygonPoints({
      radius: SIZE / 2, // 不再减去strokeWidth，让多边形充满viewBox
      centerX: CENTER,
      centerY: CENTER,
      sides,
    })
    return points.map(p => `${p.x},${p.y}`).join(' ')
  }, [sides])

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="100%"
      height="100%"
      viewBox="0 0 2048 2048"
    >
      <g transform={`rotate(${rotation}, ${CENTER}, ${CENTER})`}>
        <polygon
          points={points}
          stroke={stroke}
          strokeWidth={strokeWidth}
          fill={fill}
          strokeLinejoin="round"
          style={{ vectorEffect: 'non-scaling-stroke' }}
        />
      </g>
    </svg>
  )
}

export default Polygon

说明： #

• vector-effect: non-scaling-stroke会让描边在视觉上保持固定宽度，不管SVG如何缩放
• 移除strokeWidth对半径的影响后，多边形会充满整个viewBox，描边绘制在图形边缘外，不会挤压图形

解决方案二：动态计算缩放比例调整描边宽度 #

如果需要兼容不支持vector-effect的老浏览器，可以通过获取SVG实际渲染尺寸，计算缩放比例后反向调整strokeWidth。

修改步骤： #

1. 添加ref获取SVG元素，监听尺寸变化计算缩放比例
2. 根据缩放比例调整strokeWidth，抵消缩放带来的影响

修改后的完整组件代码：

import { useMemo, useRef, useEffect, useState } from 'react'

export const SIZE = 2048

export const CENTER = SIZE / 2

const ANGLE = -Math.PI / 2 // 第一个顶点从顶部中心开始

type PolygonInput = {
  sides: number
  stroke?: string
  strokeWidth?: number
  fill?: string
  rotation?: number // 旋转角度（度）
}

export function computePolygonPoints({
  radius,
  centerX,
  centerY,
  sides,
}: {
  radius: number
  centerX: number
  centerY: number
  sides: number
}) {
  return Array.from({ length: sides }, (_, i) => {
    const angle = (i * 2 * Math.PI) / sides + ANGLE
    const x = centerX + radius * Math.cos(angle)
    const y = centerY + radius * Math.sin(angle)
    return { x, y }
  })
}

const Polygon: React.FC<PolygonInput> = ({
  sides,
  stroke = 'black',
  strokeWidth = 0,
  fill = 'black',
  rotation = 0,
}) => {
  if (sides < 3 || sides > 360) {
    throw new Error('边数必须在3到360之间')
  }

  const svgRef = useRef<SVGSVGElement>(null)
  const [scale, setScale] = useState(1)

  // 计算SVG实际缩放比例
  useEffect(() => {
    const updateScale = () => {
      if (!svgRef.current) return
      const { width, height } = svgRef.current.getBoundingClientRect()
      // 取宽高中的最小缩放比例，保证等比例缩放
      const currentScale = Math.min(width / SIZE, height / SIZE)
      setScale(currentScale || 1)
    }

    updateScale()
    // 监听窗口 resize 事件，处理容器尺寸变化
    window.addEventListener('resize', updateScale)
    return () => window.removeEventListener('resize', updateScale)
  }, [])

  const points = useMemo(() => {
    const points = computePolygonPoints({
      radius: (SIZE - strokeWidth) / 2,
      centerX: CENTER,
      centerY: CENTER,
      sides,
    })
    return points.map(p => `${p.x},${p.y}`).join(' ')
  }, [sides, strokeWidth])

  // 反向调整描边宽度，抵消缩放影响
  const adjustedStrokeWidth = strokeWidth / scale

  return (
    <svg
      ref={svgRef}
      xmlns="http://www.w3.org/2000/svg"
      width="100%"
      height="100%"
      viewBox="0 0 2048 2048"
    >
      <g transform={`rotate(${rotation}, ${CENTER}, ${CENTER})`}>
        <polygon
          points={points}
          stroke={stroke}
          strokeWidth={adjustedStrokeWidth}
          fill={fill}
          strokeLinejoin="round"
        />
      </g>
    </svg>
  )
}

export default Polygon

说明： #

• 通过getBoundingClientRect()获取SVG实际渲染尺寸，计算出缩放比例
• 将传入的strokeWidth除以缩放比例，得到在viewBox坐标系统中需要的描边宽度，确保实际显示为指定像素值
• 监听窗口resize事件，处理容器尺寸变化的情况

使用方式不变 #

两种方案修改后，组件使用方式完全保持原有逻辑：

<Polygon
  sides={3}
  strokeWidth={8}
  stroke="red"
/>

此时无论外层div尺寸如何，描边都会保持8px的实际宽度。

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