Question

我们有一个很大的SVG对象，我们将它们分成几块。

这些小件中的大多数都有很大的偏移量，以确保将所有部件放回原处后形成完整的图片。

我想知道的是;有一种简单的方法可以拍摄一个小块，测量它的范围，然后放大它，以便填充SVG容器......

基本上，我正试图展示一个大谜题的小细胞，全屏......

我们正在尝试在浏览器中执行此操作，因此我们正在寻找.js / svg解决方案。

谢谢！

Answer 1

您可以使用getBBox()获取任何SVG元素的边界框。然后，您可以使用它在svg根元素上设置viewBox属性。

您不必担心缩放，因为preserveAspectRatio属性会解决此问题。

您可能也对SVG views感兴趣。

这是一个很好的衡量标准的例子。它将在2秒后变焦为蓝色方块，当您单击蓝色方块时平移并缩放到红色方块，并在单击红色方块时再次缩小：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <rect id="blue" x="0" y="0" width="100" height="100" fill="blue"/>
    <rect id="red" x="100" y="100" width="50" height="50" fill="red"/>

    <animate id="pan" attributeName="viewBox" begin="blue.click" dur="1s" fill="freeze"/>
    <set attributeName="viewBox" to="0 0 200 200" begin="red.click"/>

    <script><![CDATA[
    setTimeout(function(){
        var rect = document.getElementById('blue').getBBox();
        document.documentElement.setAttribute('viewBox', rect.x + ' ' + rect.y + ' ' + rect.width + ' ' + rect.height);
    }, 2000);

    var pan = document.getElementById('pan');
    var rect = document.getElementById('red').getBBox();
    pan.setAttribute('to', rect.x + ' ' + rect.y + ' ' + rect.width + ' ' + rect.height);
    ]]></script>
</svg>

我可以缩放SVG样本对象以填充其容器

1 个答案: