javascript - 带有透明字母的 SVG 背景以查看其他内容

Question

我需要运行一个视频，在它的顶部有一个不透明度小于 1 的黑色 div，但有一些文本透明以允许用户看到后面的视频，还有一个具有相同效果的按钮。

这是我正在寻找的图片:

我在另一个版本中通过使用覆盖视频区域的 png 设法做到了这一点，但现在我需要该按钮具有相同的效果并且我考虑过 SVG，但我不知道我是否可以使用它或如何使用它。

谢谢

Answer 1

下面是我使用 SVG 图像覆盖背景的方法。

.wrapper {
  position: relative;
}

.wrapper svg {
  position: absolute;
  left: 0;
  top: 0;
}

<div class="wrapper">
  <img src="http://lorempixel.com/640/480"/>

<svg id="overlay" width="640" height="480" viewBox="0 0 640 480">
  <defs>
    <mask id="mymask">
      <rect width="100%" height="100%" fill="white"/>
      <text x="320" y="140" text-anchor="middle" font-size="40px" >Some transparent text</text>
      <text x="320" y="190" text-anchor="middle" font-size="40px" >has been placed here</text>
      <rect x="220" y="300" width="200" height="50" fill="black"/>
      <text x="320" y="335" text-anchor="middle" fill="white" font-size="30px">BUTTON</text>
    </mask>
  </defs>

  <rect fill="black" fill-opacity="0.7" width="100%" height="100%" mask="url(#mymask)"/>
</svg>
  
</div>