サークルとパスが入ったSVGマーカーを作成する

Question

私のアプリでグラフを取得しました（d3.jsライブラリを使用しています）、円とその中の矢印のような特別なマーカーを追加したいのです。円形および色付きの背景）。

私は実際には私のサークルタグ の間のパスを行うことはできませんが、私はこの問題をどのように処理できますか？私は必要なもの

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

：

Answer 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>