如何扩大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