我想用一條線連接兩個點（圓圈）：
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.這樣，如果我修改 any 的中心，<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 用一條線連接兩個點，但它沒有幫助。
uj5u.com熱心網友回復：
您可以使用<marker>可放置在元素開頭、中間和結尾的 a。
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.轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/455847.html
標籤：javascript html svg
上一篇：SVG圖示不加載