滚动条应出现在缩放（缩放）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

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

希望它会帮助你:)）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;