Question

我研究了很多，并试图找到一个很好的解决方案。关于裁剪图像的网上大多数资源都没有响应，所以我试图找到一种方法。

希望有一种方法可以做到这一点。我是整个SVG剪辑的新手，所以如果有一些新手的错误就要忍受。

为了确定，我正在寻找一种自定义路径解决方案，我找到了一些解决方案，但它们都是矩形或带有x / y线的圆形物体。

html,
body {
  margin: 0;
  padding: 0;
}

.clip {
  clip-path: url(#clipping);
}

.clip-image {
  width: 100%;
  object-fit: cover;
  height: 40vw;
}

.clip-image-1 {}

#clipping {
  height: 100%;
}

.cd-mod-hero__clipping {
  height: 0;
}

<html>

<body>
  <strong>image scalled, clip path isn't</strong>
  <svg class="cd-mod-hero__clipping" clipPathUnits="objectBoundingBox">
    <defs>
      <clipPath id="clipping" preserveAspectRatio="none">
        <path d="M0 0H1440V618L268.441 568.75C227.688 567.037 192.06 540.744 178.408 502.307L0 0Z" fill="#FF0000"/>
      </clipPath>
    </defs>
  </svg>


  <div class="clip">
    <img class="clip-image" src="https://placehold.it/1000x600">
  </div>

  <hr>

  <strong>Not scaled at all</strong>
  <div class="clip">
    <img class="clip-image-1" src="https://placehold.it/1000x600">
  </div>


</body>

</html>

我想要实现的是图像宽度剪切路径，它根据给定的宽度和高度进行缩放。有关路径的完整形状，请参阅“未完全缩放”版本。

SVG剪辑路径缩放问题 - 响应性

0 个答案: