Как я могу сделать этот вид SVG

Question

Я работаю на чужом коде, и нет никакого способа связаться с ними, и вот мой вопрос:

<g 
     ng-attr-transform="translate({{node.width-18}}, 0) scale(0.6)" 
     ng-mouseover="showArrowMenuTooltip($event, node);" 
     ng-click="showArrowMenuTooltip($event, node);" 
     ng-mouseleave="hideArrowMenuTooltip($event);" 
     ng-attr-class="{{'flowchart-arrow-show-'+node.activity.act_task +' flowchart-arrow-set'}}"> 
     <!--Circle--> 
     <path 
      class="flowchart-arrow-circle" 
      d="M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466z" 
     ></path> 
     <!--Arrow--> 
     <path 
      class="flowchart-arrow" 
      d="M13.665,25.725l-3.536-3.539l6.187-6.187l-6.187-6.187l3.536-3.536l9.724,9.723L13.665,25.725z" 
     ></path> 
     </g> 

Вот код внутри SVG тег, который рисует стрелку с круг вокруг него, мой вопрос, предположим, я хочу нарисовать пояснения, как бы я это сделал?

Я уверен, что часть d="M13... не написана вручную, но я не могу найти в Интернете какие-либо документы или инструменты, которые помогут.

Answer 1

То, что вам нужно, называется элементом «Путь».

Проверить эту документацию из:

https://www.w3.org/TR/SVG/paths.html#PathData

Путь определяется в том числе элемент «путь», который содержит D = «(данные пути)» атрибут, где «d» атрибут содержит moveto, line, curve (как кубический, так и квадратичный Béziers), arc и .

Пример triangle01 указывает путь в форме треугольника. (M указывает на moveto, Ls обозначает линии, а z обозначает closepath).