我可以縮放一個SVG樣本對象來填充它的容器嗎？

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>