在浏览器中使用ViewBox调整SVG对象大小的问题

Question

我有两个div容器。第一个包含许多小的SVG图像，第二个应该包含一个您单击的SVG图像。

单击第一个div中的任何SVG图像时，我想：

1. 克隆SVG映像。
2. 将它（克隆）重新缩放到原来大小的5倍。
3. 在第二个div容器中查看。

我做了一些研究，发现我可以使用ViewBox控制SVG图像的缩放和大小。所以我设置了viewBox属性。一个小型svg如下所示：

            var small svg = div.append("svg:svg")               
                .attr("class", "thumbnail")
                .attr("width", w)
                .attr("height", h)  
                .attr("viewBox", "0 0 " + w + " " + h)
                .attr("preserveAspectRatio", "none")

                .on("click", function(){
                            var projectedGraph = this.cloneNode(true);


            IncreaseSize(projectedGraph);

            });

现在，在“IncreaseSize”方法中，我执行了以下操作：

            projectedGraph.setAttribute("class", "main")
            projectedGraph.setAttribute("width", w*5)
            projectedGraph.setAttribute("height", h*5)
            projectedGraph.setAttribute("viewBox", "0 0 " + (w*5) + " " + (h*5))


            $mainContent.append(projectedGraph); // append to second Div

但尺寸保持不变（视觉上）。当我在chrome中检查元素时。参数已设置。我花了很多时间调整这些值，试图理解这个问题，每次我增加投影图形的viewBox宽度和高度，而不重置SVG的宽度和高度，图像就会变小

我看到了很多相关的问题如：

>

使用ViewBox根据窗口大小调整svg的大小

如何缩放SVG图像以填充浏览器窗口？

但我还是无法解决这个问题。请问我做错了什么？

Answer 1

width和height属性控制SVG绘图占用的面积。viewBox控制您看到的内容。如果您增加了它们，那么您将看到更多的东西，否则是不可见的（在绘图区域之外），但每个形状将是相同的大小。

如果你想让形状变大，比如变焦一样的效果，那么就不要改变ViewBox。