html - 为什么 width = 0 height = 0 的 SVG 占用布局空间？

Question

您能解释一下为什么下例中的第一个 SVG 占用布局空间，即使它具有 width="0" 和 height="0" 吗？

是否可以在不影响布局的情况下设置样式？

body {
  display: flex;
}

.container {
  background-color: #ddd;
  margin-left: 30px
}

#blue {
  border: 1px solid blue;
}

#red {
  border: 1px solid red;
  display: block;
}

<div class="container">
  <svg id="blue" width="0" height="0"></svg>
  <svg id="red" width="100" height="100"></svg>
</div>
<div class="container">
  <svg id="red" width="100" height="100"></svg>
</div>

Answer 1

#blue 没有定义display 属性，所以它默认为inline，根据MDN说:“内联 | 元素生成一个或多个内联元素框。”

如果您将显示设置为类似block 的东西，您将看到它不占用额外的空间:

body {
  display: flex;
}

.container {
  background-color: #ddd;
  margin-left: 30px
}

#blue {
  border: 1px solid blue;
  display: block;
}

#red {
  border: 1px solid red;
  display: block;
}

<div class="container">
  <svg id="blue" width="0" height="0"></svg>
  <svg id="red" width="100" height="100"></svg>
</div>
<div class="container">
  <svg id="red" width="100" height="100"></svg>
</div>

当然，如果你想隐藏它，display: none 是可行的方法。