SVG夹子路径孔/内切

Question

<clipPath id="clip1">
    <rect x="10" y="222" height="30" width="50" rx="5"  />
</clipPath>

<image .... clip-path="url(#clip1)"  />

它会切割图像的外部空间。但是我想在图像上画一个洞。我怎样才能实现它？

Answer 1

出于您的目的，您可以使用面具

<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
   <mask id="hole">
    <rect width="100%" height="100%" fill="white"/>
	  <rect x="50" y="50" height="50" width="100" rx="5"  fill="black" />
   </mask> 
  </defs> 
    <image x="0" y="0" width="200" height="200"
 xlink:href="http://placeimg.com/200/200/any"
 mask="url(#hole)" >
  </image>  
	   </svg>