时间戳

首页 > 解决方案 > 在 svg 图像上放置一个带有文本的矩形

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>



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

标签： htmlcsssvg

解决方案

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

推荐阅读