IE中的箭头标记未正确显示

Question

我需要使用react在SVG中渲染具有不同线宽和箭头尺寸的线。尽管所有浏览器都能正确显示箭头，但IE似乎会将它们放大。

<svg>
      <defs>
        {[3, 4, 5, 6, 7, 8].map((size, index) => (
          <marker
            id={`arrowHead-${index}`}
            key={index}
            markerWidth={size * 2}
            markerHeight={size * 2}
            viewBox="0 0 10 10"
            refX="5"
            refY="5"
            orient="auto"
            markerUnits="userSpaceOnUse"
          >
            <path d="M 0 0 L 10 5 L 0 10z" fill="lime" strokeDasharray="0" />
          </marker>
        ))}
      </defs>
      <g>
        {[3, 4, 5, 6, 7, 8].map((size, index) => (
          <line
            x1={10 + index * 30}
            y1={0}
            x2={10 + index * 30}
            y2={100}
            stroke="lime"
            strokeWidth={size}
            style={{ markerEnd: `url('#arrowHead-${index}')` }}
          />
        ))}
      </g>
    </svg>

Here是一个正在运行的示例