javascript – 添加svg：g时如何在div中添加滚动条

2019年8月3日 317次阅读

大家好我正在研究html和
javascript这里是我的代码

<div class = "outer">
 <div class = "inner1 width="234" height="400" style="float: left">
   <svg width="100" height="400" style="float: left;">
      // some thing
   </svg>
 </div>
 <div class = "inner2" width="234" height="400" style="float: left overflow : scroll">
   <svg width="200" height="400" style="float: left;">
      <g class="c1" transform="translate(0,20)">
         <g>
          <text class="c1_name"></text>
          <text class="c1_value"></text>
         </g>

         <g>
          <text class="c2_name"></text>
          <text class="c2_vaue"></text>
         </g>
         <g>
          <text class="c3_name"></text>
          <text class="c3_value"></text>
         </g> 
                    .
                    .
                    . 
         // g added dynamically below the previous one

      </g>
   </svg>
 </div>
</div>

在这里,我想让我的div inner2可滚动,这样当添加一个新的g并且div的大小变小以包含所有g时它就变成了可滚动的.
我有滚动条出现,但当我的新元素添加但我无法看到它时它们也被禁用.任何人都可以指导我在哪里错了以及如何纠正这个问题

顺便说一下,我正在定位我的使用变换属性

谢谢

最佳答案 你需要使用overflow：auto;如果您只想在需要时显示滚动条.

点赞