我正试着在SVG圆的右边画一个类似于切割的弧形.
Current Result:个
.ant-avatar-group {
display: inline-flex;
}
.ant-avatar {
width: 38px;
height: 38px;
line-height: 38px;
font-size: 19px;
background: #ccc;
border-radius: 50%;
}
<div class="ant-avatar-group">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.15" cx="20" cy="20" r="19" fill="#F6BB43" stroke="white" stroke-width="2">
</circle>
</svg>
<span class="ant-avatar"> </span>
</div>
Expected Result:个
Code Tried:个
已更改,cx="20"
to cx="30"
还增加了,
margin-left: -8px;
和border-left: 4px solid #fff
到.ant-avatar
使头像图标扭曲(失go 其原始大小)右侧头像圆.
.ant-avatar-group {
display: inline-flex;
}
.ant-avatar {
width: 38px;
height: 38px;
line-height: 38px;
font-size: 19px;
background: #ccc;
border-radius: 50%;
}
<div class="ant-avatar-group">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.15" cx="30" cy="20" r="19" fill="#F6BB43" stroke="white" stroke-width="2">
</circle>
</svg>
<span class="ant-avatar"> </span>
</div>
但这并没有给出预期的输出,因为需要像圆弧一样的切割.请帮助我实现的结果,使SVG圆的右弧,如给定的预期结果.
提前非常感谢.