滚动条应该出现在缩放（缩放）svg图像上

Question

我正在尝试缩放 svg 图像。我希望在图像缩放时出现滚动条（尤其是当它超出 svg 时），以便用户可以滚动查看图像的不同部分。这是我的代码.

<script src="d3.v3.min.js"></script>
<script>
    function slided(level){
        var svg=d3.select("g");
        svg.attr("transform","scale("+level+")");
    }
</script>
<div style="height:650;width:650;overflow:scroll;border:solid red">
    <svg width="100%" height="100%" >
        <g>
        <circle id="circle" cx="100" cy="100" r="100">
        </g>
    </svg>
</div>
<input type="range" min="1" max="10" value="1" step="0.1" oninput="slided(this.value);">

Fiddle demonstrating this problem here

我怎样才能做到这一点？

Answer 1

这里有一个修复：

Fiddle fixing the scroll

所以问题是你炸毁了<g> 标签而不是SVG 本身，它包含在你的SVG 中。您只是放大了svg 的一部分，这不会增加图像的尺寸，因此不会导致滚动触发。

希望对您有所帮助。

Answer 2

在这里，只需使用 level 和圆半径（函数中的数字 200 是直径 - 2*radius ）来计算 svg 元素的宽度和高度 :)

希望对你有所帮助:)

 function slided(level) {
   var svg = d3.select('svg');
   var g = d3.select("g");
   g.attr("transform", "scale(" + level + ")");
   svg.attr("width", 200 * level);
   svg.attr("height", 200 * level);
 }

.wrapper {
  height: 300px;
  width: 300px;
  overflow: auto;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="wrapper">
  <svg width="100%" height="100%">
    <g>
      <circle id="circle" cx="100" cy="100" r="100" />
    </g>
  </svg>
</div>
<input type="range" min="1" max="10" value="1" step="0.1" oninput="slided(this.value);">