Maison > Questions et réponses > le corps du texte
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.
P粉6429198232023-12-29 09:24:06
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>