Question

我是新手使用svg，你可以看到我连接点有问题。

我想做的是将这2个点与一条线连接起来，无论它们的位置如何。

正如你在下面的图像中看到的那样，当我将cx =“50”更改为cx =“510”时，该线仍然处于同一位置，但我希望线条“跟随”第二个圆圈，无论位置如何。

恢复：

在我的情况下，我有一条静态线，当我改变坐标（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>

Answer 1

实现预期的变化线x2

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

Codepen- https://codepen.io/nagasai/pen/NjabQJ

更新了动态线的代码集

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

Answer 2

我可以尝试为您添加一个代码示例来说明我的意思，但也许文本解释现在就足够了。

如果您希望线条连接两个点，无论它们位于何处，请考虑尝试将circle元素中的属性传递给line元素。第一个圈子cx和cy将对应于x1和y1行，第二个圈子将是x2和y2。（您可以轻松地使用getAttribute从circle元素中获取此信息）

如何通过event.target通过点击处理程序获取此信息，或者通过您现在如何执行此操作（只需通过其ID抓取元素并将其推入）即可获得此信息并不重要。关键是无论这些圈子在哪里，您都希望圈子提供line坐标的信息而不是硬编码。

我希望这有助于作为一个起点。如果您还在苦苦挣扎，请随时发表评论。你真的很亲密，但我真的很想看到你完成：）

如何用svg连接不同位置的点？

2 个答案: