Как масштабировать SVG координаты в диапазоне 0 и 1?

Question

У меня были проблемы с масштабированием встроенного SVG, чтобы обрезать его в CSS в примере с контейнером изображения, которое я пытаюсь показать.

У меня естьвидел другие похожие вопросы с решениями, но они по-прежнему не работают должным образом:

<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

Они предлагают масштабировать координаты пути до диапазона от 0 до1, но я не могу найти какую-либо программную опцию (Affinity Designer) или онлайн-инструмент для этого.

Кто-нибудь решил эту проблему с масштабированием?

ps: вот форма пути

Answer 1

Вам не нужно ничего делать с координатами пути.Вместо этого просто преобразуйте масштаб <clipPath>.

. Путь, который вы хотите использовать в качестве clipPath, равен 1280 x 670, поэтому просто примените эквивалентный масштаб (1/1280, 1/670).Это дает:

transform="scale(0.00078125, 0.001492537313433)"

Это вместе с clipPathUnits="objectBoundingBox" означает, что вы можете использовать эту форму для обрезки при любом размере или соотношении сторон.

.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