How to scale SVG coordinates in the range 0 and 1?

Question

I've been having issues scaling the inline SVG, in order to clip-path it in CSS, in the example to the container of the image that I'm trying to show.

I've seen the other similar questions with solutions but they still don't work as intended:

<style>
  .cutR{
        clip-path: url(#cutR)
    }

.blogMainArticleMedia{
  float:left;
  width:100%
}

.image{
  float:left;
  display:block;
  width:100%
}
</style>
<div class="blogMainArticleMedia cutR">
  <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg" alt="image" class="image">
</div>


<svg width="0" height="0" preserveAspectRatio="none">
    <defs>
        <clipPath id="cutR" clipPathUnits="objectBoundingBox">
            <path d="M0,0c1.45,81.4 320,80 320,80l320,0l320,0c0,0 320,0.62 320,80c0,105.84 0,400 0,400c-1.45,81.4 -320,80 -320,80l-640,0c-171.919,0.239 -319.7,-0.491 -320,80l0,-720Z"
            style="fill:none;" />
        </clipPath>
    </defs>
</svg>

https://codepen.io/thepra/pen/wNdpXW

They suggest to scale the coordinates of the path to a range between 0 and 1, but I can't find any software option(Affinity Designer) or online tool to do such thing.

Did anyone solved this scaling issue?

ps: here's the shape of the path

Answer 1

You don't need to do anything to the coordinates of the path. Instead, just transform the scale of the <clipPath>.

The path you want to use as your clipPath is 1280 x 670, so just apply the equivalent scale (1/1280, 1/670). This gives:

transform="scale(0.00078125, 0.001492537313433)"

This along with clipPathUnits="objectBoundingBox" means that you can use this shape to clip at any size or aspect ratio.

.cutR {
  clip-path: url(#cutR)
}

.blogMainArticleMedia {
  float: left;
  width: 100%
}

.image {
  float: left;
  display: block;
  width: 100%
}

<div class="blogMainArticleMedia cutR">
  <img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg" alt="image" class="image">
</div>

<!-- Viewbox has no effect -->
<svg viewBox="0 0 1280 670">
  <defs>
    <clipPath transform="scale(0.00078125, 0.001492537313433)" id="cutR" clipPathUnits="objectBoundingBox">
      	<path d="M0 0C1.45 75.8834 320 74.5783 320 74.5783H960C960 74.5783 1280 75.1563 1280 149.157V522.048C1278.55 597.932 960 596.627 960 596.627H320C148.081 596.849 0.3 596.169 0 671.205V0Z"/>
    </clipPath>
  </defs>
</svg>

Codepen