如何在React中让含小矩形的SVG更清晰可见（不修改数据）

以下是几种无需改动原始矩形数据的可行方案：

1. 利用SVG的viewBox属性实现等比放大 #

通过viewBox定义SVG的坐标系统范围，再增大SVG的显示尺寸，就能让图形按比例放大，同时保持原始坐标关系：
修改SVG标签部分，添加viewBox并增大width和height的值：

<svg 
  transform="rotate(180)" 
  width={300}  // 放大为原来的3倍
  height={300}
  viewBox="0 0 100 100"  // 对应原始画布的坐标范围
>
  {data.map((item, index) => (
    <rect 
      key={index} 
      x={item.x} 
      y={item.y} 
      width={item.width} 
      height={item.height} 
      strokeWidth="2" 
      fill="none" 
      stroke="black"
    ></rect>
  ))}
</svg>

2. 使用CSS transform: scale()直接缩放 #

给SVG添加缩放变换，在原有旋转的基础上放大图形：

<svg 
  style={{ transform: "rotate(180) scale(3)" }}  // 旋转后放大3倍
  width={100} 
  height={100}
>
  {data.map((item, index) => (
    <rect 
      key={index} 
      x={item.x} 
      y={item.y} 
      width={item.width} 
      height={item.height} 
      strokeWidth="2" 
      fill="none" 
      stroke="black"
    ></rect>
  ))}
</svg>

如果担心缩放后描边过粗，可以给rect添加vector-effect: non-scaling-stroke属性，让描边宽度不随缩放变化：

<rect 
  key={index} 
  x={item.x} 
  y={item.y} 
  width={item.width} 
  height={item.height} 
  strokeWidth="2" 
  fill="none" 
  stroke="black"
  style={{ vectorEffect: "non-scaling-stroke" }}
></rect>

3. 通过外层容器CSS放大SVG #

给SVG的外层div设置宽高并添加缩放样式，同样能实现放大效果：

<div style={{ width: 300, height: 300, transform: "scale(3)" }}>
  <svg transform="rotate(180)" width={100} height={100}>
    {data.map((item, index) => (
      <rect 
        key={index} 
        x={item.x} 
        y={item.y} 
        width={item.width} 
        height={item.height} 
        strokeWidth="2" 
        fill="none" 
        stroke="black"
      ></rect>
    ))}
  </svg>
</div>

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