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); 
    }