3

我有两个 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”中“检查元素”时。参数已设置。我花了很多时间调整值并试图理解问题，每次我增加“projectedGraph”的 viewBox 宽度和高度，而不重置 svg 的宽度和高度时，图像都会变小

我看到了许多相关的问题，例如：

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

4

2 回答 2

1

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

如果您希望形状变得更大，即类似缩放效果，请不要更改 viewBox。

于 2012-12-11T19:06:00.423 回答
0

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

这是一个例子。

它的作用是它有一个嵌套的 <svg> 元素，其中有一个 <use> 元素，该元素链接到应该以另一个比例查看的 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>
于 2012-12-12T12:17:56.753 回答