SVGを使用して循環選択ボックスを作成するにはどうすればよいですか？

Question

私は私の神経の大部分を食べているような学校の割り当てを持っています。私は初心者のコーダーで、SVGエディタを作成するにはHTML/CSS/Javascriptを使用する必要があります。

私のコードはここにある：http://codepen.io/anon/pen/ZLGBwR `

私はそれのいくつかを把握するために管理が、今、私はこの時にこだわっている：私は、長方形から円に選択ボックスの形状を変更するにはどうすればよいですか？すなわち、カーソルを選択して左に移動すると矩形が作成され、これを円にする必要があります。

どうすればよいですか？ありがとう！

svg rect { 
fill: gray; 
fill-opacity: 0.2; 
stroke: navy; 
stroke-opacity: 0.2; 
} 

Answer 1

最初にジョン。あなたのコードは読めません。あなたはインデントする方法を学ぶ必要があります。それはあなたに多くの悲惨さを救うでしょう。私を信じて。

第2に、それはあなたの宿題なので、誰も解決策を完全には得られません。しかし、私はあなたにいくつかのヒントを与えます。

<rect>要素の属性は、x1、y1、x2、およびy2です。 要素の属性は、cx,cyおよびrです。だから明らかに<rect>から<circle>へのスワップはできません。

円をドラッグする方法について考えてみましょう。一般的に、中心は最初の点にあり、半径をドラッグします。

あなたは半径を持っていません。しかし、半径を計算できる開始点と終了点があります。ピタゴラスの定理を使ってください。

幸運。