CODEWITHSUNDEEP
csssvg
daniel
daniel

Reputation: 35703

SVG clip path hole / inner cut

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

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

It cuts the outer space of the image. But I want to cut a hole into the image. How can I achieve it?

Upvotes: 2

Views: 1289

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

For your purposes, you can use a mask 

<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>

Upvotes: 6

Related Questions