SVG Zoom和Pan

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