Html 将带有文本的矩形放置在svg图像的顶部

我试图放置一个矩形，文本打印在svg的顶部

运行这段代码时，我得到了矩形，但它不显示在图像的顶部，并且矩形顶部没有文本

我已经部分解决了这个问题。仍然需要移动矩形，并将感谢您的帮助

目前，它正在查看图像，但位置不正确。以下是新代码：

div class = "video-container">
          <img class = "video" src="./images/play-video.svg" alt="play-video" />
          <svg width="190" height="63">
              <rect x="0" y="0" width="190" height="63" fill="blue"/>
              <text x="50%" y="50%"  fill="white" dominant-baseline="middle" text-anchor="middle">Play Video</text>
          </svg>
      </div>

---

解决方案

HTML和SVG

将它们分组到

您的演示

---

矩形不显示在图像顶部，并且在itI顶部没有任何文本。如果已更新答案，请立即检查。另外，请访问Codepen进行查看。您好，带有方框的文本仍然不会显示在图像顶部。它们垂直出现在它的上方。我需要它们在图像的顶部显示为一个层。我该怎么做呢？你是否将文本和rect都包装在？使用新代码，它将文本放置在视频容器的左上角。如果top=1，则文本框位于视频容器下方。如何解决这个问题？

.video-container {
    position: relative;
    display: inline-block;
  }

.video-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

.video-container svg {
  position: absolute;
  top: 0;
  left: 0;
}

<div class = "video-container">
  <svg>
      <g>
        <rect class = "rect" width="100" height="100" fill="#da552f"></rect>
        <text class = "play" x="0" y="50" font-family="Verdana" font-size="35" fill="blue">Hello</text>
      </g>
  </svg>  
  <img src="./images/play-video.svg" alt="play-video" />
</div>

.video-container {
    display: flex;
    flex-direction: column;
}

    <section class = "overpass-info-container">
      <div class="description-container">
        <div class = "what-is">
          What is Overpass
        </div >
        <p class="details">
          Overpass connects phone talent from around the world with
          businesses looking to build remote customer engagement teams to
          increase sales, generate leads and so much more.
       </p>
      </div>

      <div class = "video-container">
          <img class = "video" src="./images/play-video.svg" alt="play-video" />

          <svg width="190" height="63">
            <g>
              <rect x="0" y="0" rx="5" ry="5" width="190px" height="63px" fill="#0092FF"/>
              <text x="50%" y="50%"  fill="white" dominant-baseline="middle" text-anchor="middle">Play Video</text>
            </g>
          </svg>
      </div>
    </section>

overpass-info-container {
  background-color: #0092FF;
  display: flex;
  position: relative;
}

.description-container {
  margin-top: 155px;
  display: flex;
  flex-flow: column;
  justify-content:space-around;
}

.what-is {
  text-align: left;
  font-size: 72px;
  margin-left: 200px;
  font-weight: 330;
  font-family: Proxima Nova;
  letter-spacing: 0;
  color: #FFFFFF;
  opacity: 1;
}


.video-container {
    position: relative;
    display: inline-block;
    margin-top: 142px;
  }

.video-container img {
  display: block;
  max-width: 100%;
  height: auto;
}

.video-container svg {
  position: absolute;
  top: 130px;
  left: 200px;
  box-shadow: 0px 5px 10px #00000029;
  font-size: 18px;
}

.overpass-info-container::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  height: 182px;
  width: 100%;
  background-color: white;
  background: url("../images/curve.svg") bottom center;
  background-size: 100%;
  outline: 1px solid red;
}