J'essaie de découper une image à l'aide de chemins SVG, mais mon image ne semble pas correspondre.
Voici ce que je veux réaliser :
Voici ce que j'ai obtenu :
Voici le code que j'ai essayé :
.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>
J'ai également essayé de changer la taille de vievBox et de svg mais je n'arrive pas à adapter l'image.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Voici une autre façon plus simple d’utiliser 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>