Cutting out a text shape from background that can be resized dynamically

Question

I'm trying to create a box that is opaque, but has a block of text in it that you can see through (to like the background image of the page or some element underneath).

It's hard to explain so I've made some crude diagrams:

I am attempting to use SVG files to do this and use Javascript/jquery to modify the rectangle width and height but I'm not proficient at the SVG format... I've managed to piece this together using the evenodd filter:

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>

I don't know how to modify the size/position of the text and rectangle independently well. I can barely understand what I wrote and why the margin is so big.

If anyone could help me, through this or any other method, thank you!

Edit: someone pointed out that there may be a duplicate, but that solution does not work in Firefox unfortunately. I am looking for a cross “platform” solution. But thanks for the link, it’s very helpful nonetheless.

Possible duplicate of [Transparent text cut out of background](https://stackoverflow.com/questions/13932946/transparent-text-cut-out-of-background) — phuzi, Jun 27 '17 at 09:26

score 1 · Accepted Answer · answered Jun 27 '17 at 09:58

My suggestion is to create a mask using the text. We then create a blue rectangle that we mask with the our text mask.

We can postion the SVG and have it size the way we want using SVG width and height. But we also make the blue rectangle very large and have the SVG set to overflow: visible. This allows us to easily have the SVG size be responsive and also have the blue extend to all the way to the edges of the screen.

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

This is almost perfect! But is there a way to change the size of the characters based on window height? Thanks! — PhoenixFieryn, Jun 27 '17 at 16:21
It does. If you try the JSFiddle version and resize the window, you'll see that it shrinks down when you make the window shorter. I made it so that it has a maximum height - as that was what your mockup screenshots seem to suggest you wanted. — Paul LeBeau, Jun 27 '17 at 17:13
Ah I see! Thank you, it does work. I was traveling and using my phone, didn't work there. But that's ok, i'll be having another site for mobile. Thanks again :) — PhoenixFieryn, Jun 28 '17 at 01:42

Cutting out a text shape from background that can be resized dynamically

1 Answers1