A responsive SVG shape with parallax image not full width

Question

I am having some issues with getting my SVG shape full width of the viewport, so it will work responsive for all devices.

I tried already some things like clip-path: view-box; but with no results. The main property that makes the SVG shape not responsive is the clipPathUnits="userSpaceOnUse", but since I would like to have a images with parallax inside the SVG shape I looking for a way that it will also work with the clipPath property.

What am I currently overlooking, or what is the best way to achieve this. If there are any other suggestions to use a SVG as image mask, please let me know.

HTML

 <div class="wrapper">
  <svg class="svg" viewBox="0 0 1440 896">
    <clipPath id="my-clip-path" clipPathUnits="userSpaceOnUse">
      <rect y="149.3" width="329" height="298.7" fill="red" />
      <rect y="597.3" width="329" height="298.7" fill="red"/>
      <path
            d="M1440,149.3V896H478.3V597.3h866.1c16.5,0,29.9-13.4,29.9-29.9v-89.6c0-16.5-13.4-29.9-29.9-29.9H478.3V0h448v149.3H1440z" />
    </clipPath>
  </svg>
  <div class="clipped">
    <img class="image" src="https://images.unsplash.com/photo-1595987357195-9d86aeba0fa2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=4000&q=80" />
  </div>
</div>

SCSS

svg {
  // width: 200px;
  clip-path: view-box;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 100vw;
  height: 200vh;
}

.svg {
  position: absolute;
  width: 0;
  height: 0;
}

.clipped {
  width: 100%; // was 500px
  height: 100%; // was 800px
  -webkit-clip-path: url(#my-clip-path);
  clip-path: url(#my-clip-path);
}

.image {
  width: 150%;
}

Live codepen: https://codepen.io/Caspert/pen/jOJxpZp

Answer 1

If i'm understanding your question correctly, one option is to use clipPathUnits="objectBoundingBox" on the clipPath, when you do that, the clip path will be relative to the image. Then you need to convert the svg children values to relative values in the range of 0-1. As far as I know, there isn't a tool to easily convert those values, so you can basically calculate by dividing the absolute values by its maximum width/height, e.g. 329 / 1440 for rect width.

Here is the forked codepen