Question

我想用SVG制作一个相当大的图表（我在JavaScript中一直使用Snap.svg）。我希望在元素中显示图表的可缩放部分，并且还在不同元素中显示整个事物的较小版本，用户可以在其中导航。

一个策略是：

创建两个相同的SVG，除了它们具有不同的viewBox es，并且每次我更改其中一个svg元素时，对另一个副本进行相同的更改。 viewBox属性会导致每个视图显示图表的右侧部分。

这是一个好策略吗？对我来说似乎很脆弱和浪费。还有其他一些更智能的方法吗？我真的必须画两次吗？

希望＆＃34; D＆＃39;哦！＆＃34;

Answer 1

是的，可以拥有一个主SVG，然后是＆＃34; thumbnail＆＃34;和/或＆＃34;缩放＆＃34;自动更新的同一图像的版本。

＆＃13;

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);
});

＆＃13;

#main {
    width: 400px;
    height: 400px;
}

#thumb,
#zoom {
    display: inline-block;
    width: 80px;
    height: 80px;
}

svg {
  border: solid 1px grey;
}

＆＃13;

<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>

＆＃13;

同一svg绘图的两个不同视图

1 个答案: