다른 SVG의 요소 연결

Question

svg1의 요소와 svg2의 요소 사이에 화살표를 그려야합니다. 어떻게 하나의 svg로 두 svg 요소를 넣는 것 이외에 어떻게 할 수 있습니까?

Answer 1

두 번째 svg 상단에 세 번째 svg를 사용할 수 있습니다.

세 번째 svg의 가장자리가 화살표를 가리 키도록 정확히 놓고 x1, y1, x2, y2 좌표에 대한 백분율을 사용하여 0 %, 0 %, 100 % , 100 %.

는 ... 여전히 페이지와 상호 작용 할 수 없음으로 포인터 이벤트를 설정하는 것을 잊지 마세요

var c1 = document.getElementById("svg1").getBoundingClientRect() 
 
var c2 = document.getElementById("svg2").getBoundingClientRect() 
 

 
var svg3 = document.getElementById("svg3") 
 

 
svg3.style.top = c1.top + c1.height/2 
 
svg3.style.left = c1.left + c1.width/2 
 

 
svg3.setAttribute("width", (c2.left + c2.width/2) - (c1.left + c1.width/2)) 
 
svg3.setAttribute("height", (c2.top + c2.height/2) - (c1.top + c1.height/2))

#svg3 { 
 
    position: absolute; 
 
    overflow: visible; 
 
    pointer-events: none; 
 
} 
 
#svg3 line { 
 
    marker-start: url(#arrowStart); 
 
    marker-end: url(#arrowEnd); 
 
    stroke-linecap: butt; 
 
    stroke: blue; 
 
    opacity: 0.5; 
 
    stroke-width: 5; 
 
}

<svg id="svg1" width="100px" height="100px"> 
 
    <circle cx="50" cy="50" r="40" fill="red" /> 
 
    <circle cx="50" cy="50" r="5" fill="white" /> 
 
</svg> 
 

 
some text... 
 
<br/>some other text 
 
<svg id="svg2" width="100px" height="100px"> 
 
    <circle cx="50" cy="50" r="40" fill="green" /> 
 
    <circle cx="50" cy="50" r="5" fill="white" /> 
 
</svg> 
 

 
<svg id="svg3"> 
 
    <marker id="arrowStart" viewBox="0 0 10 10" markerWidth="5" markerHeight="5" refX="8" refY="5" orient="auto-start-reverse"> 
 
    <polygon points="0,0,10,5,0,10" stroke="none" /> 
 
    </marker> 
 
    <marker id="arrowEnd" viewBox="0 0 10 10" markerWidth="5" markerHeight="5" refX="8" refY="5" orient="auto"> 
 
    <polygon points="0,0,10,5,0,10" stroke="none" /> 
 
    </marker> 
 
    <line x1="0%" y1="0%" x2="100%" y2="100%" /> 
 
</svg>