如何在添加svg:g元素后，在div中添加滚动条

Question

大家好，我正在学习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 元素，它就可以滚动了。目前我已经看到了滚动条，但是它们是禁用状态，而且当新元素添加时，我看不到它。请问有人能指导我在哪里出错了以及如何纠正吗？

顺便说一下，我正在使用 transform 属性定位。

谢谢。

- A_user

---

检查一下你的SVG标签，它们没有关闭。 - Ax.

你还有一个问题需要解决。你不应该指定SVG标签的高度，这样它可以随着添加元素而自动增长。 - Ax.

我已经删除了长度，但是仍然不知道我的错误在哪里:( - A_user

Answer 1

如果您只想在需要时显示滚动条，那么您需要使用overflow:auto;。

- Ax.

---

问题在于滚动条没有被激活。 - A_user

这可能是因为您的代码有很多语法错误吗？请检查这个链接：http://jsfiddle.net/3kXty/ - Ax.

现在您可以玩弄 div 的大小并检查您的代码：http://jsfiddle.net/3kXty/3/ - Ax.

谢谢只是为了展示实际上这很大，所以我只是添加了片段并更改了名称以使其简单。 - A_user

兄弟，如果你需要在固定大小的块上显示滚动条，你只需要指定 overflow:auto 的 CSS 规则。就这样。你代码中的所有问题都是语法错误。 - Ax.

Answer 2

在 div 中，没有 width 和 height 属性，使用 CSS（例如 style="width: 999px; height: 999px;"）以及需要 overflow: auto / overflow: scroll（您可以使用每个滚动条独立的 overflow-x 和 overflow-y 进行操作）。

- pozs

---

更重要的是，您需要在“宽度”和“高度”中指定度量单位，例如“px”。 - Ax.