SVG縮放和平移

Question

我有一棵樹的SVG佈局（來自D3）。我的HTML中有一個SVG元素，它佔用了頁面寬度和高度的100％。然後，在那個SVG元素中，D3渲染一個帶有一堆圓圈和線條的組元素。例如：

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

我希望能夠進行縮放和平移，使得樹（組元素）的某一部分佔據屏幕。我有我想要放大的區域的確切座標，所以理想情況下，我想將SVG元素向上移動到左側，然後將整個元素按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); 
    }