Svg放大到特定矩形

  • Z时代
  • 2024-01-10
  • 分类：问答

我有SVG与多个分组元素。我要做的就是放大部分团体。Svg放大到特定矩形

我已经与{top, left, width, height}纠正了，我想放大（更改我的SVG的viewBox属性）。

任何简单的方法来计算viewBox的正确值？

回答：

您可以设置视框中等于“左上宽度高度”：

这里有一个简单的例子。点击任一矩形将缩放该矩形上的屏幕。再次单击它将使屏幕恢复到原始缩放。

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>

以上是 Svg放大到特定矩形 的全部内容， 来源链接： utcz.com/qa/257834.html

回到顶部