実は、前の章でも、HTMLとSVGだけではなく、JavaScriptを使っていました。要素上辺の中央から要素下辺の中央へ線を引くために、開始点と終了点を取得するためです。実際に継承を表す矢印を引くのもJavaScriptを使いました。
クラス図もどきを作ったわけですが、あそこまでできれば、次に何をやろうとするか、想像の付いた人も多いかと思います。そうです、マウスでグリグリやりたいですよね。やってみましょう。
SVGの描画範囲を越えて、「くらす」を移動できてしまいますが、このあたりは御愛嬌と言うことで。但し、下の四角の中まで、「くらす」を持っていってしまうと、なぜかコントロールが効かなくなってしまいます。そのような場合は、リロードしてください。
今度のはコネクタにより、クラスを結んでみました。
お互いのクラスが、水平または垂直方向に、30px以上離れていた場合、コネクタが正く追随します。もちろん完璧を期すこともできますが、コードが長くなるのでサンプルとしては、この程度ということで。
どうでしょう、案外簡単に面白そうなものができそうです。
せっかくクラス図（？）を作ったのですから、関連を変更できるようにしてみましょう。実は、このあたりの処理は、スタイルシートの設定で、なんとでもなるのです。