css - 为什么 <svg> 会包含 <div>？

Question

这是我正在努力工作的一些 SVG， Angular 色的位置很有趣(但这很好)，但不好的是整个 SVG 应该在 <div> 中在<h1>里面，但它似乎在下面跳下来。我添加了我认为应该是不必要的 top: 0;风格，但没有帮助。

我不明白的第二件事是为什么“svg sample”文本被推到底部......我想可能与基线对齐有关，但我不明白，我不知道如何修复它。

body,
h1 {
  margin: 0;
  padding: 0;
}

body {
  padding-top: 53px;
}

h1 {
  background-color: lightblue;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  height: 47px;
  margin-right: 53px;
  padding-left: 53px;
  border: 3px solid;
  font-size: 25pt;
  font-weight: 800;
}

#screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.world {
  position: relative;
  font-family: "Times New Roman";
  font-weight: normal;
  font-size: 120px;
  display: inline-block;
}

.world svg {
  width: 100%;
  height: 100%;
  top: 0;
}

.world div {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div id="screen">
  <h1>
    <div class="world" style="height: 47px; width: 94px;">
      <div>
        <svg class="h1world" viewBox="0 -200 560 280">
          <text x="0 30 60 150 152" y="0 0 -30 -30 -90">Hello</text>
          <line id="staff" />
        </svg>
      </div>
    </div>
    <span> &nbsp; svg sample</span>
  </h1>
</div>

Answer 1

根据 spec，

div 在 h1 中无效.

在我下面的代码片段中，我:

1. 将 h1 更改为类并将其分配给 div。
2. 将 vertical-align: top 添加到 world 类。
3. 将 float: left 添加到 svg 类。

body {
  padding-top: 53px;
}

.h1 {
  background-color: lightblue;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
  height: 47px;
  margin-right: 53px;
  padding-left: 53px;
  border: 3px solid;
  font-size: 25pt;
  font-weight: 800;
}

#screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.world {
  position: relative;
  font-family: "Times New Roman";
  font-weight: normal;
  font-size: 120px;
  display: inline-block;
  vertical-align: top;
}

.world svg {
  float: left;
}

<div id="screen">
  <div class="h1">
    <div class="world" style="height: 47px; width: 94px;">
      <svg class="h1world" viewBox="0 -200 560 280">
        <text x="0 30 60 150 152" y="0 0 -30 -30 -90">Hello</text>
        <line id="staff" />
      </svg>
    </div>
    <span> &nbsp; svg sample</span>
  </div>
</div>