如何在SVG中将箭头头部包含在线的长度中？

Question

在SVG中，可以定义标记并将其用作箭头。是否有一种方法可以（自动）将这些标记包含在线的长度中？

以下是一个示例：

<svg width="600px" height="200px">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" />
    </marker>
  </defs>

  <line x1="50" y1="50" x2="250" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" />
  <line x1="50" y1="100" x2="250" y2="100" stroke="#000" stroke-width="5"/>
</svg>

https://codepen.io/anon/pen/jmZLRM

这里箭头被附加到线的末端，使得连同箭头的线比单独的线包括箭头更长。我希望包含箭头的线和不包含箭头的线长度相同。

- Daniel

---

你找到解决方案了吗？ - undefined

Answer 1

更改refX属性（我将线条变为红色，以便您更好地看到标记的结束位置）：

<svg width="600px" height="200px">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="8.7" refY="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" />
    </marker>
  </defs>
  <line x1="50" y1="50" x2="250" y2="50" stroke="red" stroke-width="5" marker-end="url(#arrow)" />
  <line x1="50" y1="100" x2="250" y2="100" stroke="#000" stroke-width="5"/>
</svg>

- Gerardo Furtado

---

谢谢。然而，我看到红线延伸超过箭头的尖端。这并不理想。有没有办法解决这个问题？ - undefined

当然有办法绕过这个问题，只需按照你想要的方式更改refX的值，这正是我的答案的重点所在。顺便说一下，该线并没有延伸到箭头之外，我将线条设为红色只是为了向您展示这一点：由于箭头呈三角形状，如果箭头的尖端恰好与线的相同位置结束（这是您在问题中提到的），您必须看到线的一部分（除非线的宽度无限小）。放大浏览器，您会发现，使用我正在使用的值（8.7），线实际上在箭头之前结束。 - undefined

谢谢。但是你可以看到箭头顶部的那条线是我所说的“超出”的意思 - 我表达得有点不清楚。所以，我想要的是一条带有箭头的线，它的起点和终点与下方的线相同，并且没有线条在箭头处突出。基本上，如果从一个点画箭头到另一个点，我们可以期望得到这样的效果。而且我不想手动调整线条的长度。 - undefined

我刚找到了我一直在寻找的功能：https://www.w3.org/TR/svg-markers/#MarkerKnockout。不幸的是，目前似乎还不支持。 - undefined

我越来越意识到使用标记的一些现有缺点：无法使用线条的描边或填充颜色，并且边界框不包括标记。期待SVG 2.0的到来（将支持context-stroke，context-fill，marker-knockout-left，marker-knockout-right属性）。但目前标记功能受到严格限制。 - undefined