Saya cuba klip imej menggunakan laluan SVG, tetapi imej saya nampaknya tidak sesuai.
Ini yang saya ingin capai:
Ini yang saya dapat:
Ini kod yang saya cuba:
.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>
Saya juga cuba menukar saiz vievBox dan svg tetapi saya tidak dapat memuatkan imej.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini satu lagi cara yang lebih mudah untuk menggunakan 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>