SVG Coordinates not working with % values

Question

I'm using the following SVG code:

<svg viewbox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <clipPath id="myClip">
            <polygon points="43.85 0, 77.55 0, 60.7 29.95"/>
        </clipPath>
    </defs>
</svg>

and the following CSS:

.full_screen_slider_block .swiper .bg_image {
    width: 100%;
    height: 100%;
    clip-path: url(#myClip);
}

To try and clip a shape from a background image, but in my attempts to make it "responsive" I need to use "%" values instead of "px" values. The values below are the ones I need but as a percentage e.g.

The first value is 43.85% but instead my SVG shape is starting at 43.85px from the left side instead.

I've read online to use the viewbox etc. and this should then work but it isn't. Am I missing something?

What I'm essentially trying to do is re-create the below. It's a blue textured background, with an interior home image and then those 3 shapes cut out of it (just in case there's a better way to accomplish this?).

Any help would be appreciated. Thanks!