如何在 0 和 1 范围内缩放 SVG 坐标？

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>

代码笔