SVG宽度设为100%，导致溢出其容器

Question

在下面的代码片段中，添加svg元素会导致出现垂直滚动条。删除svg元素会删除滚动条。我想知道为什么会发生这种情况，是否有一种不可行的解决方案（例如width:99％;height：98％可以解决问题，但这是一个丑陋的解决方案）。

我无法删除上层DIV样式，因为其他HTML结构也位于这些容器中，需要保留它们。

.menuquery {
  border: 1px solid #ccc;
  overflow: auto;
  box-sizing: border-box;
}

.xainnersubformdefault {
  /* allows the svg to autosize */
  width: 100%;
  height: 100%;
}

.xadatabox {
  height: 100%;
  /* essential for jtable to scroll and not leak */
}

.datachart {
  width: 100%;
  height: 100%;
  /* position:relative; */
  /* to make an svg fill its container, this is required, see stackoverflow 9566792 */
}

svg {
  width: 100%;
  height: 100%;
  border: 1px solid green;
  box-sizing: border-box;
}

<div class="menuquery" style="width:300px;height:200px">
  <div class="xa xafield xadatabox">
    <div class="xainnersubformdefault">
      <div class="datachart">
        <svg></svg>
      </div>
    </div>
  </div>
</div>

绿色边框和盒子大小在SVG上只是为了让我们看到SVG的边缘，在最终版本中不需要

如果我将SVG更改为DIV，并使SVG CSS应用于该DIV，则不会出现滚动条，因此SVG元素似乎有所不同。

我已在Firefox和IE中进行了测试。两者都显示滚动条，但是IE显示的可滚动内容略多。

- user2728841

Answer 1

Svg 是一个 inline 元素，将 .menuquery 设置为 font-size: 0; 可以解决这个问题。

.menuquery {
    border: 1px solid #ccc;
    overflow: auto;
    box-sizing: border-box;
    font-size: 0;
}
.xainnersubformdefault {
  /* allows the svg to autosize */
  width: 100%;
  height: 100%;
}

.xadatabox {
  height: 100%;
  /* essential for jtable to scroll and not leak */
}

.datachart {
  width: 100%;
  height: 100%;
  /* position:relative; */
  /* to make an svg fill its container, this is required, see stackoverflow 9566792 */
}

svg {
  width: 100%;
  height: 100%;
  border: 1px solid green;
  box-sizing: border-box;
}

<div class="menuquery" style="width:300px;height:200px">
  <div class="xa xafield xadatabox">
    <div class="xainnersubformdefault">
      <div class="datachart">
        <svg></svg>
      </div>
    </div>
  </div>
</div>

---

或者您可以将display:block设置为svg。更新于您的评论。

.menuquery {
    border: 1px solid #ccc;
    overflow: auto;
    box-sizing: border-box;
}
.xainnersubformdefault {
  /* allows the svg to autosize */
  width: 100%;
  height: 100%;
}

.xadatabox {
  height: 100%;
  /* essential for jtable to scroll and not leak */
}

.datachart {
  width: 100%;
  height: 100%;
  /* position:relative; */
  /* to make an svg fill its container, this is required, see stackoverflow 9566792 */
}

svg {
  width: 100%;
  height: 100%;
  border: 1px solid green;
  box-sizing: border-box;
  display:block;
}

<div class="menuquery" style="width:300px;height:200px">
  <div class="xa xafield xadatabox">
    <div class="xainnersubformdefault">
      <div class="datachart">
        <svg></svg>
      </div>
    </div>
  </div>
</div>

- Abhishek Pandey

---

啊，所以我只是尝试在SVG元素上使用display:block，因为这似乎比在更高的位置设置字体大小更直观和不会造成太大干扰。 - user2728841

当然，你可以将 svg 转换为 block 元素，但如果元素是 inline，那么 font-size 是最好的选择。 - Abhishek Pandey

谢谢，SVG不需要内联，因为它永远不会有相邻的元素，所以在这种情况下，我认为两种方法都可以。我可以确认display:block也可以工作。 - user2728841

你的解决方案很好，但我仍然不明白为什么内联SVG会导致垂直滚动条出现？ - Olivier Boissé

@OlivierBoissé 在HTML中，内联元素被视为文本，因此它们具有“跟踪和字距”，使空格和文本看起来更易读。 - Abhishek Pandey

Answer 2

从.menuquery中移除overflow: auto;：

.menuquery {
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.xainnersubformdefault {
  /* allows the svg to autosize */
  width: 100%;
  height: 100%;
}

.xadatabox {
  height: 100%;
  /* essential for jtable to scroll and not leak */
}

.datachart {
  width: 100%;
  height: 100%;
  /* position:relative; */
  /* to make an svg fill its container, this is required, see stackoverflow 9566792 */
}

svg {
  width: 100%;
  height: 100%;
  border: 1px solid green;
  box-sizing: border-box;
}

<div class="menuquery" style="width:300px;height:200px">
  <div class="xa xafield xadatabox">
    <div class="xainnersubformdefault">
      <div class="datachart">
        <svg></svg>
      </div>
    </div>
  </div>
</div>

- fen1x

---

谢谢，看起来好像可以了，但在标记为答案之前，我会将其推回主代码中，因为我只是添加了它来调试SVG比其容器更宽的问题（所以现在问题已经消失了，我感到非常惊讶！！）。你有任何想法为什么会发生这种情况吗？谢谢。 - user2728841

我相信Abhishek Pandey的答案解释了这个。 - user2728841