Могу ли я увеличить образец объекта SVG, чтобы заполнить его контейнер

Question

У нас есть большой объект SVG, который мы разделили на маленькие кусочки.

Большинство этих маленьких кусочков имеют большое смещение, чтобы гарантировать, что когда все кусочки соединены вместе, они образуют полную картину.

Что мне интересно, так это; Есть ли простой способ взять один маленький кусочек, измерить его экстент, а затем увеличить его, чтобы он заполнил контейнер SVG ...

По сути, я пытаюсь показать одну крошечную ячейку большой головоломки в полноэкранном режиме.

Мы пытаемся сделать это в браузере, поэтому ищем решения .js / svg.

Спасибо!

Answer 1

Вы можете использовать getBBox(), чтобы получить ограничивающую рамку любого элемента SVG.Затем вы можете использовать его для установки атрибута viewBox в корневом элементе svg.

На самом деле вам не придется беспокоиться о масштабировании, потому что * 1011Атрибут * позаботится об этом.

Вам также могут быть интересны SVG-представления .

Вот небольшой пример для хорошей меры.Через 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>