SVGの、circle中心に伸びるpathのmarker-endの調整方法
半径が点の範疇以上に指定されている円があり、Pathをその縁の中心を目的地にしています。
例えば、次のようなSVGを描きました。
https://jsfiddle.net/zjgnfw88/1/
<svg width="600px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- /////////////////////////////////////////////// -->
<g>
<defs>
<marker id="endpoint" viewBox="-50 0 50 50" refX="0" refY="25" markerUnits="strokeWidth" markerWidth="20" markerHeight="20" orient="auto">
<path d="M -50 0 L 0 25 L -50 50 z"></path>
</marker>
</defs>
<text x="10" y="50">単にmarker-endを指定しても、circleの半径が大きいと円の下敷きになってしまう</text>
<path d="M 0,100 C 50,100 80,131 130,131 C 130,131 180,130 200,100"
stroke="black"
fill="none"
marker-end="url(#endpoint)"
>
</path>
</g>
<g>
<circle cx="200" cy="100" r="20" stroke-width="2px" stroke="#aaa" fill="#fff" opacity="0.75"></circle>
<!-- /////////////////////////////////////////////// -->
<text x="10" y="240">このように、円の淵に矢印の先端が来るようにしたい。</text>
<text x="10" y="260">ただし、進入角度は予測できず、線も一本だけとも限らない</text>
<path d="M 0,300 C 50,300 80,331 130,331 C 130,331 180,330 200,300"
stroke="black"
fill="none"
>
</path>
<path d="M 185 315 L 174 312 L 185 326 z"></path>
<circle cx="200" cy="300" r="20" stroke-width="2px" stroke="#aaa" fill="#fff" opacity="0.75"></circle>
</g>
<text x="10" y="20">2016/07/03 14:30 本スニペットを追加</text>
</svg>
矢印が円の中に消えてしまうため、 marker内で生成する三角形をrefXで外側に来るようにずらしますが、この方法では、進入角度によっては矢印としての三角形が成り立ちません。
方法が無いかと色々探しているのですが、見当たらない状況です。
何か良い方法は無いでしょうか。よろしくお願いします。
(線は複数あり、また予測不能ないろいろな角度から侵入します。)