Я хочу соединить две точки (круги) линией:
window.onclick = () => {
document.getElementById('c2').setAttribute("cx", 150);
}
<svg>
<circle cx = "10" cy = "10" r = "2" id = "c1" />
<circle cx = "90" cy = "50" r = "2" id = "c2" />
<line x1 = "10" y1 = "10" x2 = "90" y2 = "50" stroke = "black" />
</svg><br>
Click here to move a circle.
так что если я изменю центр любого <circle>
на setAttribute("cx", 150)
, то строка автоматически следует новой позиции круга.
Есть ли способ сделать это с помощью <use>
? Что-то вроде (псевдокод):
<svg>
<circle cx = "10" cy = "10" r = "2" id = "c1" />
<circle cx = "90" cy = "50" r = "2" id = "c2" />
<use x1=xlink:c1:cx y1=xlink:c1:cy x2=xlink:c2:cx y2=xlink:c2:cy stroke = "black" type = "line" />
</svg>
Цель: я не хочу устанавливать координаты два раза, как в circle
, так и в line
. Вместо этого я хотел бы установить координаты один раз, и что line
использует ссылку на элементы circle
.
Примечание. Я прочитал SVG соедините две точки линией, но это не помогло.
при щелчке вы можете установить как cx круга, так и x2 линии на одно и то же значение
Вы можете использовать <marker>
, который можно разместить в начале, середине и конце элемента.
window.onclick = () => {
document.getElementById('l1').setAttribute("x2", 150);
}
<svg viewBox = "0 0 200 100" width = "200">
<defs>
<marker id = "circle" viewBox = "0 0 4 4" refX = "2"
refY = "2" markerWidth = "4" markerHeight = "4">
<circle cx = "2" cy = "2" r = "2" />
</marker>
</defs>
<line id = "l1" x1 = "10" y1 = "10" x2 = "90" y2 = "50" stroke = "black"
marker-start = "url(#circle)" marker-end = "url(#circle)"/>
</svg><br>
Click here to move a circle.
Как это сделать @RobertLongson?