Svg放大到特定矩形

Question

我有SVG與多個分組元素。我要做的就是放大部分團體。

我已經與{top, left, width, height}糾正了，我想放大（更改我的SVG的viewBox屬性）。

任何簡單的方法來計算viewBox的正確值？

Answer 1

您可以設置視框中等於「左上寬度高度」：

這裏有一個簡單的例子。點擊任一矩形將縮放該矩形上的屏幕。再次單擊它將使屏幕恢復到原始縮放。

var selected = false; 
 
var svg = document.getElementById('svg'); 
 

 
var zoomOnElement = function(e) { 
 
    if (e.target === selected) { 
 
\t // Deselect element 
 
\t svg.setAttribute("viewBox", "0 0 600 400"); 
 
\t selected = false; 
 
    } else { 
 
\t // Select element 
 
\t selected = e.target; 
 
\t var viewBox = selected.getAttribute('x'); 
 
\t viewBox += " " + selected.getAttribute('y') 
 
\t viewBox += " " + selected.getAttribute('width') 
 
\t viewBox += " " + selected.getAttribute('height') 
 
\t svg.setAttribute("viewBox", viewBox); 
 
    } 
 
} 
 

 
document.getElementById('rect-1').addEventListener("click", zoomOnElement); 
 
document.getElementById('rect-2').addEventListener("click", zoomOnElement);

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 600 400" id="svg"> 
 

 
    <rect id="background" width="600" height="400" fill="#eee"/> 
 
    <rect id="rect-1" x="100" y="50" width="50" height="300" fill="red"/> 
 
    <rect id="rect-2" x="225" y="175" width="300" height="50" fill="blue"/> 
 
    
 
</svg>