SVG 줌 및 팬

Question

트리의 SVG 레이아웃 (D3부터)이 있습니다. HTML의 SVG 요소는 페이지의 너비와 높이의 100 %를 차지합니다. 그런 다음 SVG 요소 내에서 D3은 그룹 요소를 원과 줄이 들어있는 형태로 렌더링합니다. 예를 들어 :

<svg style='width:100%;height:100%;'> 
    <g> 
     ...stuff... 
    </g> 
</svg> 

나는 나무 (그룹 요소)의 특정 부분이 화면을 차지하도록 확대 할 수 및 팬 싶어요. 나는 줌인하고자하는 영역의 정확한 좌표를 가지고 있으므로 이상적으로 SVG 요소 X 픽셀을 왼쪽 위로 이동시킨 다음 전체 요소를 Y로 스케일합니다. 어떻게하면 좋을까요?

필자가 읽은 바에 따르면 viewBox 특성이 가장 적합하지만 한 부분 만 확대 할 수있는 방법을 알 수 없습니다. This 예제가 원하는대로 표시되지만 내 SVG 요소는 픽셀이 아니라 백분율로 측정됩니다. 그리고 좌표계가 임의적이라고 가정하더라도, 저는이 둘 사이의 변환에 어려움을 겪고 있습니다.

Answer 1

여기서는 SVG 이미지의 특정 영역을 확대/축소하는 데 사용합니다. cx를 x 좌표로, cy를 y 좌표로, 너비와 높이를 호출하십시오. 관심을 가져야 할 내용은 svgDocument.setAttribute(...)

function zoomTarget1() { 
     var svgDocument = document.getElementsByTagName('svg')[0]; 
     var cx = 20; 
     var cy = 20; 
     var width = 610; 
     svgDocument.setAttribute("viewBox", cx+" "+cy+" "+width+" 590"); 
     var reShow = svgDocument.getElementById("FloorSelection"); 
     showReturnButton(cx,cy, width, reShow); 
    }