React项目中SVG倾斜矩阵对角线锯齿问题的抗锯齿优化求助

大家好，我正在开发一个React项目，需要生成带有倾斜单元格的动态SVG矩阵，但目前遇到了棘手的抗锯齿问题：倾斜操作产生的对角线外边框有严重的锯齿（走样），在Edge浏览器里表现得尤其明显，想请教下有没有靠谱的优化方案🙏

当前实现代码 #

先贴出我的组件实现代码：

function Matrix({
  rows = 3,
  cols = 3,
  cellSize = 100,
  color = 'transparent',
  textSize = 30,
  textColor = 'black',
  strokeColor = 'black',
  strokeWidth = 3,
  angle = -12
}) {
  const width = Math.round(cellSize * Math.cos(Math.PI * (angle / 180)));
  const cells = [];

  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      const x = width / 2 + Math.round(j * width);
      const y = Math.round(cellSize + i * cellSize);

      cells.push(
        <g
          key={`cell-${j}-${i}`}
          transform={`skewY(${angle})`}
          className="matrix-element"
        >
          <rect
            x={x}
            y={y}
            width={width}
            height={cellSize}
            rx="0"
            fill={color}
            stroke={strokeColor}
            strokeWidth={strokeWidth}
            style={{
              borderLeft: j === 0 ? `${strokeWidth}px solid ${strokeColor}` : 'none',
              borderTop: i === 0 ? `${strokeWidth}px solid ${strokeColor}` : 'none',
              shapeRendering: 'crispEdges'
            }}
          />
          <text
            x={`${x + 1/2 * cellSize * Math.cos(Math.PI * (angle / 180))}`}
            y={y + cellSize / 2}
            textAnchor="middle"
            dominantBaseline="middle"
            fontSize={textSize}
            fill={textColor}
          >
            0
          </text>
        </g>
      );
    }
  }

  return (
    <svg
      width={(cols + 1) * width}
      height={width / 2 + (rows + 1) * width}
      viewBox={`${-strokeWidth / 2} ${-strokeWidth / 2} ${(cols + 1) * width} ${width / 2 + (rows + 1) * width}`}
      preserveAspectRatio="xMidYMid"
    >
      {cells}
    </svg>
  );
}

已尝试的方案及问题 #

我试过调整shape-rendering CSS属性，但在Edge浏览器里的结果始终不尽人意：

• 设置为geometricPrecision时，线条会稍微平滑一些，但仍有明显的瑕疵
• 设置为crispEdges时，锯齿情况反而会严重恶化

期望实现的效果 #

1. 生成的SVG对角线边框能达到教科书或PPT级别的平滑度，无明显锯齿
2. 这种平滑效果在后续导出为图片时也能完整保留

有没有大佬能给我一些针对性的优化建议？比如SVG属性调整、渲染策略或者React相关的技巧都可以，非常感谢！

内容来源于stack exchange