svgを使って異なる位置にドットを接続する方法は？

私はあなたが見ることができ、私はドットを接続する際に問題があるので、svgを使うことに新しいです。svgを使って異なる位置にドットを接続する方法は？

私がしたいのは、この2ドットを位置に関係なく線で接続することです。

私はcx = "50"をcx = "510"に変更したときに画像を見ることができますが、同じ位置にある行はまだありますが、位置に関係なく2番目の円に " 。再開

：

を私の場合、私はその私は私の座標（CXまたはCY）を変更するときに、他のドットを結ぶ動のラインを持つようにしたいものを静的ラインを持っています。

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    \t <title></title> 
 
    
 
    
 
    </head> 
 
    <body> 
 
    
 
    
 
    <svg width="1000" height="1000"> 
 
    
 
     <circle id="circle0" cx="50" cy="50" r="20" stroke="black" stroke-width="3" fill="grey" onClick="dotClick(0)"></circle> 
 
     <circle id="circle1" cx="50" cy="110" r="20" stroke="black" stroke-width="3" fill="grey" onClick="dotClick(1)"></circle> 
 
    \t 
 
    
 
     <line id="line0" x1="50" y1="50" x2="50" y2="100" /> 
 
    
 
    </svg> 
 
    
 
    
 
    
 
    <script> 
 
    \t 
 
    \t var buttons = {}; 
 
    
 
    function dotClick(width) { 
 
    
 
     (width === 0) ? buttons.one = !buttons.one : buttons.two = !buttons.two; 
 
     
 
    
 
     document.getElementById("line0").setAttribute("stroke", (buttons.one && buttons.two) ? "red" : ""); 
 
     document.getElementById("circle0").setAttribute("fill", (buttons.one ? "red" : "grey")); 
 
     
 
     document.getElementById("circle1").setAttribute("fill", (buttons.two ? "red" : "grey")); 
 
    
 
    
 
    } 
 
    </script> 
 
    
 
    </body> 
 
    </html>

出典

2017-05-05 jarwin

この要点から 'drawPath'関数を適応させることができます：https://gist.github.com/alojzije/11127839 –

も同様

<line id="line0" x1="50" y1="50" x2="510" y2="100" />

予想される変化線X2 Codepen-を達成するためhttps://codepen.io/nagasai/pen/NjabQJ

動的Lためcodepen更新INE

https://codepen.io/nagasai/pen/OmxWLa?editors=1111

出典

2017-05-05 00:34:39

しかし、あなたの例では、 "静的な"行があります。私が起こそうとしていることは、ディナミックなラインです。毎回私の座標（cxとcy）を変更すると、そのラインは他のサークルに従います。私はこれをうまく説明するかどうかわかりませんが、それは私がやろうとしていることです。 – jarwin

質問の2行目を読んだ場合、彼は "私がしたいことは、自分の位置にかかわらず、この2ドットを行と結びつけることです**"と明確に述べています。 – aug

@Jarwin、私はcodepenを更新しました –

私はあなたは私が何を意味するか説明するためにおそらくテキストの説明は今のところ十分であろうのコード例を追加しようとすることができます。

どこにあるかにかかわらず2つのドットを接続する場合は、circle要素の属性をline要素に渡そうとすることを検討してください。最初の円のcxとcyは、線のx1とy1に対応し、2番目の円はx2とy2となります。あなたはそれはあなたがクリックハンドラを通過するか、それは（あなたが今それをやっている方法によることevent.targetてあるかどうか、この情報を入手する方法

（あなたは同じように簡単に circle要素オフこの情報をつかむために getAttributeを使用することができます）単純にそのidで要素をつかんで押し込む）は本当に重要ではありません。ポイントは、これらのサークルがどこにあるかに関係なく、サークルに line座標の情報を提供し、ハードコードしないようにしたいとします。

私はこれが出発点として役立つことを望みます。まだ苦労している場合は、自由にコメントしてください。あなたは本当に近いですが、私は本当にあなたが終わるのを見ていきたいと思います:)

出典

2017-05-05 00:42:35 aug

svgを使って異なる位置にドットを接続する方法は？

答えて

関連する問題