私はサークルを作っています(約20ラジアン)。内部にテキストがいくつかあります。 と私はそれに矢印パスを描きたい。 私は "マーカーエンド"を使用します。円の上書き矢印。 マーカー境界の位置を円の枠に移動するにはどうすればよいですか?SVGパス:矢印の境界線をマーカーで終わらせる方法は?
<svg width="600px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs><!-- ready for endpoint arrow -->
<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>
<g>
<text x="10" y="50">Trouble : Arrow Hide(override) by Circle</text>
<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)"></path>
<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)"></path>
<circle cx="200" cy="100" r="20" stroke-width="2px" stroke="#aaa" fill="#fff" opacity="0.95"></circle>
<text x="165" y="105">Some Text</text>
</g>
<g>
<text x="10" y="240">What I want?</text>
<text x="10" y="260">Auto detect arrow head to border</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>
<path d="M 440,300 C 350,300 350,331 300,331 C 260,331 230,260 200,300" stroke="black" fill="none"></path>
<path d="M 216 289 L 223 295 L 220 283 z"></path>
<circle cx="200" cy="300" r="20" stroke-width="2px" stroke="#aaa" fill="#fff" opacity="0.75"></circle>
<text x="165" y="305">Some Text</text>
</g>
<!-- /////////////////////////////////////////////// -->
</svg>
noway ...ああ...大丈夫、私は他の方法にしようとします。 – Monon
よく中間の頂点にマーカーを描画するmarker-midプロパティがあります。パスを2つのサブパスに切り詰めた場合、マーカーを中間位置に置くことができます –