svg如何连接不同位置的点？
[英]How to connect dots in differents positions with svg?
问题描述
I'm new at using svg as you can see and i have a problem connecting dots. 
如您所见，我是使用svg的新手，而且在连接点时遇到问题。
What I want to do is to connect this 2 dots with a line no matter their position. 我想做的就是将这2个点用一条线连接起来，无论它们的位置如何。
As you can see in the image bellow when i change the cx="50" to cx="510" the line still in the same postion but i want the line to "follow" the second circle no matter the position. 正如您在图像波纹管中看到的那样，当我将cx =“ 50”更改为cx =“ 510”时，该线仍在同一位置，但是无论位置如何，我都希望该线“跟随”第二个圆。
Resuming: 恢复：
In my case I have a static line what I want its to have a dinamic line that connects with the other dot when I change my coordinates(cx or cy). 在我的情况下，我有一条静态线，当我更改坐标（cx或cy）时，我希望它有一条与其他点连接的动态线。
<!DOCTYPE html> <html> <head> <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> <line id="line0" x1="50" y1="50" x2="50" y2="100" /> </svg> <script> 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>
2 个解决方案
解决方案1
2 已采纳 2017-05-05 00:34:39
To achieve expected change line x2 as well 也要达到预期的变化x2
<line id="line0" x1="50" y1="50" x2="510" y2="100" />
Codepen- https://codepen.io/nagasai/pen/NjabQJ Codepen- https: //codepen.io/nagasai/pen/NjabQJ
Updated codepen for dynamic line 更新了动态行的代码笔
https://codepen.io/nagasai/pen/OmxWLa?editors=1111 https://codepen.io/nagasai/pen/OmxWLa?editors=1111
解决方案2
1 2017-05-05 00:42:35
I can try to add a code example for you to illustrate what I mean but perhaps a textual explanation will suffice for now. 我可以尝试为您添加一个代码示例，以说明我的意思，但也许现在文字说明就足够了。
If you want the line to connect the two dots no matter where they may be, consider trying to pass the attributes in the circle elements to the line element. 如果希望直线将两个点连接在一起，无论它们位于何处，请考虑尝试将circle元素中的属性传递给line元素。 The first circle's cx and cy would correspond to the line's x1 and y1 and the second circle would be the x2 and y2 . 第一个圆的cx和cy对应于线的x1和y1 ，第二个圆的x2和y2 。 (You can just as easily use getAttribute to grab this information off the circle elements) （您可以轻松地使用getAttribute从circle元素中获取此信息）
How you get this information whether it be through an event.target you pass through the click handler or it be through how you're doing it now (simply grabbing the element by its id and shoving it in) doesn't truly matter. 无论是通过event.target还是通过单击处理程序传递信息，还是通过现在如何进行操作（只需通过其id抓取元素并将其推入），如何获取这些信息都不是真正重要的。 The point is no matter where these circles are, you want the circles to be supplying the information for the line coordinates and not hardcoded. 关键是无论这些圆在哪里，您都希望圆为line坐标提供信息，而不是硬编码。
I hope this helps as a starting point. 我希望这可以作为一个起点。 If you are still struggling, feel free to comment. 如果您仍在挣扎，请随时发表评论。 You are really close but I'd really like to see you finish through :) 您真的很亲密，但我很想看到您完成:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.