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>