-1

我有一个树的 SVG 布局（来自 D3）。我的 HTML 中有一个 SVG 元素，它占据了页面宽度和高度的 100%。然后，在该 SVG 元素中，D3 渲染一个组元素，其中包含一堆圆圈和线条。例如：

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

我希望能够缩放和平移，以便树的某个部分（组元素）占据屏幕。我有要放大的区域的确切坐标，所以理想情况下，我想将 SVG 元素 X 像素向上和向左移动，然后按 Y 缩放整个元素。我怎样才能最好地做到这一点？

从我正在阅读的内容来看， viewBox 属性最适合这个，但我只是无法弄清楚我如何能够只放大一个部分。这个例子似乎得到了我想要的，但我的 SVG 元素是用百分比来衡量的，而不是像素。即使坐标系应该是任意的，我也很难在两者之间进行转换。

4

1 回答 1

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);
    }
于 2014-01-24T15:36:31.143 回答