Javascript 从可动态调整大小的背景中剪切文本形状

我试图创建一个不透明的框，但其中有一块文本，您可以看穿（以喜欢页面的背景图像或下面的某个元素）

这很难解释，所以我做了一些粗略的图表：

我正试图使用SVG文件来实现这一点，并使用Javascript/jquery来修改矩形的宽度和高度，但我对SVG格式并不精通。。。我已成功使用evenodd过滤器将其拼接在一起：

示例fillrule evenodd-演示填充规则：evenodd

我不知道如何独立地修改文本和矩形的大小/位置。我几乎无法理解我写了什么以及为什么利润如此之大

如果有人能通过这个或其他方法帮助我，谢谢

---

编辑：有人指出可能存在重复，但不幸的是，该解决方案在Firefox中不起作用。我正在寻找一个跨“平台”的解决方案。但是谢谢你的链接，尽管如此还是很有帮助。

我的建议是使用文本创建一个面具。然后，我们创建一个蓝色矩形，并用文本掩码对其进行掩码

我们可以使用SVG

width

和

height

定位SVG，并使其按我们想要的方式调整大小。但我们也将蓝色矩形设置得非常大，并将SVG设置为

溢出：可见

。这使我们能够轻松地使SVG大小具有响应性，并且使蓝色延伸到屏幕的所有边缘

正文{
背景图像：url（'http://austinhou.com/img/cover.jpg');
背景尺寸：封面；
保证金：0；
填充：0；
}
#封面图片{
宽度：40%；
高度：100vh；
溢出：可见；
}

这可能是完美的复制品！但是有没有办法根据窗口高度改变字符的大小呢？谢谢是的。如果您尝试JSFIDLE版本并调整窗口大小，您会发现当您缩短窗口时，窗口会缩小。我这样做是为了它有一个最大的高度-因为这是你的模型截图似乎表明你想要的。啊，我明白了！谢谢，它确实有用。我在旅行，用手机，没有在那里工作。但没关系，我会有另一个移动网站。再次感谢：）

<svg id="coverimage" width="80pcm" height="30cm" viewBox="0 0 2000 2000"  version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example fillrule-evenodd - demonstrates fill-rule:evenodd</desc>

    <defs>
  <rect x="1" y="1" width="2000" height="1000"
        fill="white" stroke="blue" />
    </defs>
  <g fill-rule="evenodd" fill="white" >
    <path d="M0 0 h1000 v1000 h-1000z M841,396.8c-2.4-4-1.6-8.8,2.4-11.2c68-44,95.2-105.6,95.2-172.8c0-116-96.8-205.6-211.2-205.6H610.6H469.8
    h-6.4c-4,0-5.6,1.6-8.8,6.4L315.4,320c-4,6.4-8,6.4-11.2,0l-140-306.4c-2.4-4.8-4.8-6.4-8.8-6.4H9c-5.6,0-8.8,4-6.4,9.6l264,554.4
    c1.6,4,5.6,6.4,9.6,6.4h66.4c4,0,7.2-1.6,8.8-5.6l110.4-230.8v228.4c0,4.8,3.2,8,8,8h146.4c4.8,0,8-3.2,8-8V426.4c0-4.8,3.2-8,8-8
    h42.4c4,0,8,1.6,9.6,5.6l76,148c1.6,4,5.6,5.6,9.6,5.6h158.4c5.6,0,8.8-4,5.6-9.6L841,396.8z M701.8,276h-69.6c-4.8,0-8-3.2-8-8
    V158.4c0-4.8,3.2-8,8-8h75.2c36.8,0,68,28.8,68,62.4C775.4,244,750.6,276,701.8,276z"/>
  </g>