SVG：带圆角连接/端点的箭头标记

1. 首先在SVG文档中定义一个带圆角连接/端点的箭头标记。

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrowHead" markerWidth="10" markerHeight="7"
            refX="0" refY="3.5" orient="auto">
      <path d="M 0 0 L 10 3.5 L 0 7 Z" style="fill: #000000; stroke:none;"/>
    </marker>
  </defs>
</svg>

2. 创建路径并使用定义的箭头标记。请注意，我们需要使用marker-end属性来指定箭头标记。

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrowHead" markerWidth="10" markerHeight="7"
            refX="0" refY="3.5" orient="auto">
      <path d="M 0 0 L 10 3.5 L 0 7 Z" style="fill: #000000; stroke:none;"/>
    </marker>
  </defs>
  <path d="M 10 10 L 100 50 L 50 100 L 10 10"
        style="stroke: #000000; stroke-width: 3px; fill: none;
               marker-end: url(#arrowHead);"/>
</svg>

以上代码将绘制具有圆角连接/端点的箭头标记的路径。

其中，markerWidth和markerHeight属性指定箭头标记的大小，refX和refY属性指定箭头标记在路径上的位置，orient属性指定箭头标记的方向。箭头标记的路径由<path>元素定义。在marker-end属性中，我们通过url(#arrowhead)指定了使用之前定义的标记。

效果如下所示：

![SVG arrow head marker