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

【问题标题】：SVG background with transparent letters to see the other content带有透明字母的 SVG 背景以查看其他内容
【发布时间】：2015-07-04 04:17:38
【问题描述】：

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

这是我要找的图片：

我在另一个版本中通过使用覆盖视频区域的 png 来做到这一点，但现在我需要那个按钮来产生相同的效果，我虽然关于 SVG，但我不知道我是否真的可以使用它或如何使用它。

谢谢

【问题讨论】：

您必须查看 SVG 掩码，但我觉得这个问题太宽泛了。

标签： javascript jquery html css svg

【解决方案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>

【讨论】：