円の中心までベジェ曲線を引くときに終端の矢印を円の外周に置いたがイマイチなサンプル - Qiita

はじめに 下図のように円に向けてベジェ曲線を引くときに、綺麗に中心に向くようにしたいので、ベジェ曲線の終点を円の中心にした場合にマーカを円の外周上に置きたいという希望があります。 で、2つ案を考えましたが、どちらもイマイチだと判明したという自分用メモです。 図1. まあまあ良い例 デモ ベジェ曲線のp1, p2, p3, p4はドラッグ可能です。 矢印の配置案 1. refXに円の半径をプラス refXについては下記をご参照ください。 SVG 1.1 W3C勧告のrefXの説明 svg要素の基本的な使い方まとめ refXに円の半径をプラスするのはお手軽で良いかと思ったのですが、図2のようなベジェ曲線だとイマイチでした。refXはベジェ曲線の端点での接線方向に進むので、曲線上から外れてしまうんですね。 図2. refXでオフセット指定だと位置がずれる例 2. ベジェ曲線の線上で端点から円の半