创建带有圆圈和路径的 SVG 标记答案

【问题标题】：Create SVG Marker with circle and path inside创建带有圆圈和路径的 SVG 标记
【发布时间】：2016-12-12 11:57:02
【问题描述】：

我的应用程序中有一些图表（使用 d3.js 库），我想添加特殊的标记，它看起来像圆圈和里面的箭头（简而言之：带有圆形和彩色背景的箭头）。

我读到我真的不能在我的圆圈标签之间做一条路径，那么我该如何处理这个问题呢？

<defs>
    <marker id="circle1" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx="5" cy="5" r="3"></circle>
    </marker>
</defs>

我需要什么：

【问题讨论】：

添加一个路径作为圆的兄弟。不确定我是否完全理解您的问题。

标签： svg marker

【解决方案1】：

一个标记里面可以有多个元素。

<svg>
  <defs>
    <marker id="circle1" markerWidth="8" markerHeight="8"
            refX="5" refY="5" orient="auto">
      <circle cx="5" cy="5" r="3" fill="black"/>
      <circle cx="5" cy="5" r="2" fill="white"/>
      <path d="M 4,3.5 L 6.5,5 L 4,6.5 Z" fill="black"/>
    </marker>
  </defs>
  
  <line x1="50" y1="120" x2="250" y2="50" stroke="black" stroke-width="5"
        marker-end="url(#circle1)" />
</svg>

【讨论】：