如何在SVG中绘制一个非三角形的标记？

Question

例如，像这个矩形标记

Answer 1

使用<marker>中的<def>元素。然后，您可以通过引用marker-start="url(#id)"的ID（或使用marker-mid或marker-end）在开头和结尾添加标记。您可以在标记标记中定义您喜欢的任何形状。下面的示例只是一个垂直线，如您的示例所示。

<defs>
    <marker id="marker-bar"
            refX="0" refY="5"
            markerHeight="20"
            markerWidth="20"
            viewBox="0 0 10 10"
            orient="auto"
            markerUnits="strokeWidth">
        <path stroke="#111" d="M0 0 v10"/>
    </marker>
</defs>

<path stroke="#111" fill="none"
      d="M152,172 C62,174 190,28 192,122"
      marker-end="url(#marker-bar)"/>