将 Border-radius 放在剪辑路径中

Question

有没有办法在剪辑路径中放置边界半径？

这是我的代码；

剪辑路径：多边形(0 0, 100% 0, 96% 100%, 5% 100%); 边框半径：93px 66px 80px 80px;

Answer 1

您可以使用 SVG clipPath 定义要在另一个 SVG 中裁剪的区域，并将其宽度和高度设置为零，这样它就不会占用视口中的任何空间。我们使用 defs 元素来存储剪辑路径，以便我们可以在另一个 SVG 中使用它。

SVG 可以通过 image 元素包含图像，然后使用

clip-path

属性应用裁剪 SVG。然后，您可以使用像 svg 路径编辑器 这样的路径编辑器发挥创意，并制作您喜欢的任何形状。

下面的例子

#image {
  width: 300px;
  height: 300px;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.110253 0 50.22 50" id='clipsvg' width="0" height="0">
  <defs>
    <clipPath id="mask">
      <path d="M 10 0 L 40 0 C 45 0 51 5 50 10 L 45 40 C 45 45 40 50 35 50 L 15 50 C 10 50 6 45 5 40 L 0 10 C -1 5 5 0 10 0" />
    </clipPath>
  </defs>
</svg>

<svg id='image' xmlns="http://www.w3.org/2000/svg" viewBox="-0.110253 0 50.22 50">
  <image width="100%" height="100%" clip-path="url(#mask)" href="https://placekitten.com/300/300" />
</svg>