更改折线/直线/路径stroke-width时，如何固定SVG marker宽高

这个问题我之前也碰到过，默认的SVG marker确实会跟着线条粗细变大变小，挺烦人的。不过只要调整几个关键属性就能搞定，我给你详细说下实现方法：

核心原理 #

默认情况下，SVG marker的markerUnits属性值是strokeWidth，这意味着marker的尺寸会根据使用它的线条（polyline/line/path）的stroke-width来缩放。我们只需要把这个属性改成userSpaceOnUse，让marker的尺寸基于SVG的用户坐标系，就能脱离线条粗细的影响。

具体实现步骤 #

1. 设置markerUnits为userSpaceOnUse #

这是最关键的一步，直接切断marker和线条stroke-width的关联。

2. 明确固定markerWidth和markerHeight #

给<marker>元素设置固定的markerWidth和markerHeight值，比如你想让marker保持10x10的大小，就设置这两个属性为10。

3. 配置viewBox确保图形正确显示 #

添加viewBox属性来定义marker内部图形的坐标范围，这样能保证marker图形在固定尺寸内正确缩放，不会变形。

4. 调整refX/refY对齐线条端点 #

根据marker图形的形状，调整refX和refY，让marker的关键位置（比如箭头的尖端）正好对齐线条的端点，避免偏移。

示例代码 #

下面是一个完整的示例，对比了默认marker和固定尺寸marker的效果：

<svg width="400" height="300">
  <!-- 默认marker（会随stroke-width变化） -->
  <marker id="defaultArrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6">
    <path d="M0,0 L10,5 L0,10 z" fill="#000" />
  </marker>

  <!-- 固定尺寸的marker -->
  <marker id="fixedArrow" viewBox="0 0 10 10" refX="10" refY="5" 
          markerWidth="10" markerHeight="10" markerUnits="userSpaceOnUse">
    <path d="M0,0 L10,5 L0,10 z" fill="#ff0000" />
  </marker>

  <!-- 默认marker的效果 -->
  <line x1="50" y1="50" x2="350" y2="50" stroke="black" stroke-width="2" marker-end="url(#defaultArrow)" />
  <line x1="50" y1="100" x2="350" y2="100" stroke="black" stroke-width="8" marker-end="url(#defaultArrow)" />

  <!-- 固定尺寸marker的效果 -->
  <line x1="50" y1="180" x2="350" y2="180" stroke="black" stroke-width="2" marker-end="url(#fixedArrow)" />
  <line x1="50" y1="230" x2="350" y2="230" stroke="black" stroke-width="8" marker-end="url(#fixedArrow)" />
  <line x1="50" y1="280" x2="350" y2="280" stroke="black" stroke-width="15" marker-end="url(#fixedArrow)" />
</svg>

在这个示例里，红色箭头（fixedArrow）不管线条粗细如何变化，尺寸始终保持一致；而黑色箭头（defaultArrow）会随着线条变粗而变大。

注意事项 #

• 如果你的marker图形比较复杂，viewBox要准确覆盖整个图形的坐标范围，这样才能保证缩放后的图形不变形。
• refX和refY的取值要根据marker图形的实际位置调整，比如箭头的尖端在viewBox的x=10位置，就把refX设为10，这样箭头尖端正好对齐线条的末端。

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