どうやって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（cubicとquadraticベジエールの両方）、arcと のclosepath命令が含まれています。

例triangle01は、三角形の形のパスを指定します。 （M はmovetoを示し、Lsはlinetosを示し、zは closepathを示します）。