SVG缩放到特定矩形答案

【问题标题】：Svg zoom to specific rectSVG缩放到特定矩形
【发布时间】：2018-05-16 15:06:56
【问题描述】：

我有包含多个分组元素的 SVG。我要做的是放大到特定组。

我已经得到了 {top, left, width, height} 的矩形，我想放大到（更改我的 SVG 的 viewBox 属性）。

有什么简单的方法可以计算出viewBox 的正确值吗？

【问题讨论】：

当然你只是将viewBox设置为"top left width height"。

标签： javascript svg viewbox

【解决方案1】：

您可以将 viewBox 设置为等于“左上角宽度高度”：

这是一个简单的例子。单击任一矩形将在该矩形上缩放屏幕。再次点击它会使屏幕恢复到原来的缩放状态。

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

var zoomOnElement = function(e) {
    if (e.target === selected) {
	// Deselect element
	svg.setAttribute("viewBox", "0 0 600 400");
	selected = false;
    } else {
	// Select element
	selected = e.target;
	var viewBox = selected.getAttribute('x');
	viewBox += " " + selected.getAttribute('y')
	viewBox += " " + selected.getAttribute('width')
	viewBox += " " + selected.getAttribute('height')
	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>

【讨论】：

谢谢！效果很好！我对属性有所了解，但在我的情况下，这并没有以同样的方式工作......所以我想我必须以某种方式计算这些值......但我在我的代码中发现了错误；）