I'm trying to clip an image using SVG paths, but my image doesn't seem to fit.
This is what I want to achieve:
This is what I got:
This is the code I tried:
.topbar-chat-img {
width: 48px;
height: 48px;
object-fit: cover;
clip-path: url(#topbar-img-svg);
}
<img src="https://picsum.photos/200/200?image=1069" class="topbar-chat-img" />
<svg>
<defs>
<clipPath id="topbar-img-svg">
<path class="svg-cls" d="M33,66A33.009,33.009,0,0,1,20.155,2.593,32.99,32.99,0,0,1,66,33a32.691,32.691,0,0,1-3.271,14.341,11.008,11.008,0,0,0-13.148,14.2A32.978,32.978,0,0,1,33,66Z"/>
</clipPath>
</defs>
</svg>
I also tried changing the size of vievBox and svg but I can't fit the image.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Here's another easier way to use SVG:
body { background:pink; }<svg width="200" height="200"> <defs> <mask id="hole"> <circle r="100" cx="100" cy="100" fill="white"/> <circle r="50" cx="180" cy="180" fill="black"/> </mask> <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200"> <image xlink:href="https://picsum.photos/200/200?image=1069" x="0" y="0" width="200" height="200" /> </pattern> </defs> <!-- create a rect, fill it with the image and apply the above mask --> <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" /> </svg>