Question

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

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

我正在尝试使用SVG文件来执行此操作并使用Javascript / jquery来修改矩形的宽度和高度，但我并不精通SVG格式...我已经设法使用偶数过滤器将它拼凑在一起：

https://jsfiddle.net/PhoenixFieryn/sqvLgqbq/

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

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

如果有人可以通过这种或任何其他方法帮助我，谢谢！

编辑：有人指出可能存在重复，但不幸的是，该解决方案在Firefox中不起作用。我正在寻找一个跨平台的解决方案。但是感谢这个链接，它仍然非常有用。

Answer 1

我的建议是使用文字创建一个遮罩。然后我们创建一个蓝色矩形，用我们的文本掩码进行掩码。

我们可以使用SVG width和height来定位SVG并使其按照我们想要的方式调整大小。但我们也将蓝色矩形设置得非常大，并将SVG设置为overflow: visible。这使我们可以轻松地使SVG大小响应，并且蓝色一直延伸到屏幕的边缘。

body {
  background-image: url('http://austinhou.com/img/cover.jpg');
  background-size: cover;
  margin: 0;
  padding: 0;
}

#coverimage {
  width: 40%;
  height: 100vh;
  overflow: visible;
}

<body>

<svg id="coverimage" viewBox="0 0 950 600" preserveAspectRatio="xMinYMid meet">
  <defs>
    <mask id="vr">
      <rect x="0" y="-1000%" width="1000%" height="3000%" fill="white"/>
      <path fill="black" d="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" transform="translate(-210 0)"/>
    </mask>
  </defs>
  <rect x="0" y="-1000%" width="1000%" height="3000%" fill="#09f" mask="url(#vr)"/>
</svg>

</body>

JSFiddle version

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

1 个答案: