Question

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

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

克隆SVG图像。
将其（克隆）重新缩放到原始大小的5倍。
在第二个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

但尺寸保持不变（视觉上）。当我'检查'inChrome'中的元素时。参数已设置。我花了很多时间调整值并试图理解问题，每次我增加'projectedGraph的viewBox宽度和高度，而不重新设置svg的宽度和高度，图像变小了

我看到很多相关问题，例如：

还有更多，但我仍然无法解决这个问题。我做错了什么？

Answer 1

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

如果你想让形状变大，即变焦效果，那就不要改变viewBox。

Answer 2

你知道如果你只想以不同的比例查看它，你不必克隆svg，对吗？

这是一个example。

它做的是它有一个嵌套的＆lt; svg＆gt;具有＆lt; use＆gt;的元素里面的元素链接到应该以另一个比例查看的svg。

<svg id="mainsvg">
  <g id="map">
    ...
      your unscaled svg here
    ...
  </g>

  <svg id="miniview" viewBox="340 502 100 100" 
   width="200" height="200" x="400" y="60" overflow="hidden">
    <use xlink:href="#map" width="100%" height="100%"/>
  </svg>
</svg>

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

2 个答案: