登录  /  注册
从图像中切出圆形部分:分步指南
P粉536909186
P粉536909186 2023-12-28 10:48:37
[HTML讨论组]

我正在尝试使用 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 的大小,但我无法适应图像。

P粉536909186
P粉536909186

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号