我正在尝试使用 SVG 路径剪辑图像,但我的图像似乎不太适合。
这就是我想要实现的目标:
这就是我得到的:
这是我尝试过的代码:
.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>
我还尝试更改 vievBox 和 svg 的大小,但我无法适应图像。
这是使用 SVG 的另一种更简单的方法: