Responsively Position SVG within a Parent

Question

I have an SVG overlay that is a shape with a hole punched out of it. Is there anyway I can set it so the overlay is effectively pinned to the bottom right corner and keeps the circle in proportionately the same position, whilst expanding the rest of the SVG to fill the remaining area of the container?

I've managed to get the SVG to (seemingly) stay in the bottom right corner, but I can't work out how to get it to fill the rest of the container? I'll need to do this without contorting the circle shape obviously.

codepen: https://codepen.io/emilychews/pen/KQmZEd

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

#overlay {
position: absolute;
bottom: 0; 
right: 0;
}

<div id="box">
    <svg id="overlay" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.71 170.5"><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2-2"><path d="M0,0V170.5H232.71V0ZM187.37,148.19a23,23,0,1,1,23-23h0A23,23,0,0,1,187.37,148.19Z" transform="translate(0 0)" fill="#015668"/></g></g></svg>
</div>

Answer 1

Here's how I would do it. I'll provide step-by-step instructions so it's easier to follow the "magic". :)

The idea is to use a simple square SVG with a viewBox width and height of 100x100. Then we can position the circle that will be our future hole in the bottom right of the viewBox.

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

<div id="box">
  <svg width="100%" height="100%" viewBox="0 0 100 100">
    <rect x="0" y="0" width="100" height="100" fill="#015668"/>
    <circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
  </svg>
</div>

Then we use preserveAspectRatio="xMaxYMax meet" to tell the renderer that we want the SVG contents in the bottom right corner.

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

<div id="box">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
    <rect x="0" y="0" width="100" height="100" fill="#015668"/>
    <circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
  </svg>
</div>

The next step is make the rectangle wider and start off the left of the viewBox so that it fills the area of the viewport that is to the left of the SVG. We'll do that by making it start at x="-900" and be width="1000". That means it extends to the left 9X more than the (100 wide) viewBox. That should make it more than wide enough to cater for even the most humongous monitors around.

We will also do the same thing in the vertical direction. Just in case the viewport ever gets tall and skinny. That can happen if you resize the window so that it has narrow width.

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

<div id="box">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
    <rect x="-900" y="-900" width="1000" height="1000" fill="#015668"/>
    <circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
  </svg>
</div>

Finally, we convert this to a mask and apply it to a rectangle that fills the viewport the same way.

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

<div id="box">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
    <defs>
      <mask id="mymask">
        <rect x="-900" y="-900" width="1000" height="1000" fill="white" fill-opacity="0.9"/>
        <circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
      </mask>
    </defs>
    <rect x="-900" y="-900" width="1000" height="1000" fill="#015668" mask="url(#mymask)"/>
  </svg>
</div>

For a final test. Let's make the "box" bigger to check it is properly responsive. We'll make it 400px high this time. Try resizing the browser windo to check the responsiveness.

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 400px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

<div id="box">
  <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
    <defs>
      <mask id="mymask">
        <rect x="-900" y="-900" width="1000" height="1000" fill="white" fill-opacity="0.9"/>
        <circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
      </mask>
    </defs>
    <rect x="-900" y="-900" width="1000" height="1000" fill="#015668" mask="url(#mymask)"/>
  </svg>
</div>

Answer 2

I would consider another idea to create the hole using mask where you can easily control the circle position and size. Then the trick is to make the whole svg to overflow with big width/height to always cover the div and to keep the same size of the circle:

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

#overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width:1000px;
  height:1000px;
}

<div id="box">
  <svg  id="overlay" viewbox="0 0 400 400" >
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <!-- This circle is your hole -->
      <circle r="20" cx="370" cy="370" fill="black"/>
    </mask>
  </defs>

  <rect x=0 y=0 width=400 height=400 mask="url(#hole)" fill="green" />
    
</svg>
</div>

If you want the circle to be resized on width change you can try this:

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

#overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width:100%;
}

<div id="box">
  <svg  id="overlay" viewbox="0 0 400 10000" >
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <!-- This circle is your hole -->
      <circle r="80" cx="300" cy="9900" fill="black"/>
    </mask>
  </defs>

  <rect x=0 y=0 width=400 height=10000 mask="url(#hole)" fill="green" />
    
</svg>
</div>

---

And you can easily have the opacity you needed in the previous question:

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
}

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://lorempixel.com/400/400/) center/cover;
  overflow: hidden;
}

#overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width:100%;
}

<div id="box">
  <svg  id="overlay" viewbox="0 0 400 10000" >
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <!-- This circle is your hole -->
      <circle r="80" cx="300" cy="9900" fill="black"/>
    </mask>
  </defs>

  <rect x=0 y=0 width=400 height=10000 mask="url(#hole)" fill="rgba(0,0,255,0.5)" />
    
</svg>
</div>