为什么<svg>会包含</svg> <div>？</div>

Question

这里有一些SVG我试图开始工作，角色定位很有趣（但这很好），但是不好的是整个SVG应该在里面在<div>内<h1>，但它似乎跳到了下方。我添加了我认为应该是不必要的top: 0;样式，但它没有帮助。

我不明白的第二件事是＆＃34; svg样本＆＃34;我猜想，这可能与基线对齐有关，但我不了解它，而且我也不知道如何修复它。

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据{{​​3}}，

div在h1内无效。

在下面的代码段中，我：

1. 将h1更改为某个班级，并将其分配给div。
2. 将vertical-align: top添加到world课程。
3. 将float: left添加到svg课程。
＆＃13;
＆＃13;
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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;