时间戳

首页 > 解决方案 > 试图将 svg 放在 img 之上

html - 试图将 svg 放在 img 之上

问题描述

我修改了我之前的代码，现在问题如下：我正在尝试将一个 svg 放在一个 img 之上。我只能放置在左上角，顶部：0；并离开：0；当我增加这些值时，svg 会位于容器下方。

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

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

.video-container svg {
  position: absolute;
  top: 1;
  left: 0;
}
<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" width="190" height="63" fill="blue"/>
              <text x="50%" y="50%"  fill="white" dominant-baseline="middle" text-anchor="middle">Play Video</text>
            </g>
          </svg>
      </div>

标签： htmlcsssvg

解决方案

您应该为 指定一个单位top。只是0不需要单位。

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

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

.video-container svg {
  position: absolute;
  top: 40px;
  left: 55px;
}
<div class = "video-container">
          <img class = "video" src="https://picsum.photos/300/150" alt="play-video" />

          <svg width="190" height="60">
            <g>
              <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>
            </g>
          </svg>
      </div>

推荐阅读