如何使用 SVG 形状进行图像裁剪？

Question

任何人都可以指导我如何做 CSS 具有 SVG 独特形状的图像剪辑路径？有些人建议使用 SVG Injector 等第三方插件。谁能帮我完成这项适用于所有浏览器的任务？

我给出了一张示例图片，以便更好地理解。请查看下图。

http://ktdev.khaleejtimes.ae/shape.jpg

非常感谢。

Answer 1

首先，您需要绘制一条具有所需形状的路径。接下来，您使用形状使用 <clipPath>

裁剪图像

svg{border:1px solid}

<svg viewBox="0 0 643 525">
  
  <defs>
    <clipPath id="shape">
      <path fill="none" d="M109,120c0,0,163,46,220,9s34-97,34-97s39.138-16.341,70-11c26.406,4.57,66.618,73.939,105,138
 c37.199,62.089,73,119,73,119s10.398,18.504,0,44c-8.608,21.105-22.685,41.421-88.85,85.03C468.32,442.51,411,474,411,474
 s-85,45-192,9l-5,1c0,0-34.254,15.226-60.675,10.088c-36-7-48.249-32.676-48.249-32.676S172,402,160,327S60,220,60,220
 s-8.444-34,0-52C77.666,130.345,109,120,109,120z"/>
    </clipPath>
    
  </defs>
<image width="643" height="643" clip-path="url(#shape)"  xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
</image>

</svg>

如何使用 SVG 形状进行图像裁剪？

How to do Image clipping by using SVG shapes?

css

svg

clipping

clip-path

image-clipping