javascript - 同一 svg 绘图的两个不同 View

Question

我想使用 SVG 制作一个相当大的图表(我一直在 JavaScript 中使用 Snap.svg)。我想在元素中显示图表的可缩放部分，并在用户可以导航的不同元素中显示整个内容的较小版本。

一个策略是这样的:

制作两个相同的 SVG，除了它们具有不同的 viewBoxes，每次我更改其中一个 svg 元素时，对另一个副本进行相同的更改。 viewBox 属性使每个 View 显示图表的正确部分。

这是一个好的策略吗？对我来说似乎是脆弱和浪费的。还有其他更聪明的方法吗？我真的必须把所有东西都画两次吗？

期待“D'oh!”

Answer 1

是的，可以有一个主 SVG，然后是自动更新的同一图像的“缩略图”和/或“缩放”版本。

document.getElementById("but").addEventListener("click", function() {
  var svg = document.getElementById("mainsvg");
  var c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  c.setAttribute("cx", 1000*Math.random());
  c.setAttribute("cy", 1000*Math.random());
  c.setAttribute("r", 50);
  c.setAttribute("fill", "red");
  svg.appendChild(c);
});

#main {
    width: 400px;
    height: 400px;
}

#thumb,
#zoom {
    display: inline-block;
    width: 80px;
    height: 80px;
}

svg {
  border: solid 1px grey;
}

<div id="main">
    <svg id="mainsvg" viewBox="0 0 1000 1000">
        <rect x="100" y="100" width="500" height="500" fill="green"
              transform="rotate(10,350,350)"/>
        <rect x="400" y="400" width="500" height="500" fill="orange"
              transform="rotate(-10,650,650)"/>
    </svg>
</div>


<div id="thumb">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000">
        <use xlink:href="#mainsvg" />
    </svg>
</div>


<div id="zoom">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000">
        <use xlink:href="#mainsvg" 
             x="-500" y="-1200"
             width="3000" height="3000" />
        <!-- control the zoom and position with x, y, width and height -->
    </svg>
</div>


<div>
  <button id="but">Click me</button>
</div>