css - 如何使用 SVG 形状进行图像剪辑？

Question

任何人都可以指导我如何使用 SVG 独特的形状制作 CSS 图像剪辑路径？有些人建议使用 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>