title: SVG Path : How to marker-end arrow head to circle border?
body: <p>I making circle (about Radian to 20). and have a few text on inside.
  and I want to draw arrow-path to it.
  So I use "marker-end" .  but circle override arrow.
  How to (Can I ) move marker-end location to circle border?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="600px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  
  
  &lt;defs&gt;&lt;!-- ready for endpoint arrow --&gt;
  &lt;marker id="endpoint" viewBox="-50 0 50 50" refX="0" refY="25" markerUnits="strokeWidth" markerWidth="20" markerHeight="20" orient="auto"&gt;
    &lt;path d="M -50 0 L 0 25 L -50 50 z"&gt;&lt;/path&gt;
  &lt;/marker&gt;
  &lt;/defs&gt;
    
  &lt;g&gt;
  &lt;text x="10" y="50"&gt;Trouble : Arrow Hide(override) by Circle&lt;/text&gt;
  &lt;path d="M 0,100 C 50,100 80,131 130,131 C 130,131 190,130 200,100" 
          stroke="black" fill="none" marker-end="url(#endpoint)"&gt;&lt;/path&gt;
    &lt;path d="M 440,100 C 350,100 350,131 300,131 C 260,131 230,60 200,100"
          stroke="black" fill="none" marker-end="url(#endpoint)"&gt;&lt;/path&gt;
   &lt;circle cx="200" cy="100" r="20" stroke-width="2px" stroke="#aaa" fill="#fff" opacity="0.95"&gt;&lt;/circle&gt;
  &lt;text x="165" y="105"&gt;Some Text&lt;/text&gt;
   &lt;/g&gt;
   &lt;g&gt;
   &lt;text x="10" y="240"&gt;What I want?&lt;/text&gt;
   &lt;text x="10" y="260"&gt;Auto detect arrow head to border&lt;/text&gt;
  &lt;path d="M 0,300 C 50,300 80,331 130,331 C 130,331 180,330 200,300" stroke="black" fill="none"&gt;&lt;/path&gt;
  &lt;path d="M 185 315 L 174 312 L 185 326 z"&gt;&lt;/path&gt;
     
     
  &lt;path d="M 440,300 C 350,300 350,331 300,331 C 260,331 230,260 200,300" stroke="black" fill="none"&gt;&lt;/path&gt;
  &lt;path d="M 216 289 L 223 295 L 220 283 z"&gt;&lt;/path&gt;
   
   &lt;circle cx="200" cy="300" r="20" stroke-width="2px" stroke="#aaa" fill="#fff" opacity="0.75"&gt;&lt;/circle&gt;
   &lt;text x="165" y="305"&gt;Some Text&lt;/text&gt;
   &lt;/g&gt;
   &lt;!-- /////////////////////////////////////////////// --&gt;
   &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>