我正试着在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:

enter image description here

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圆的右弧,如给定的预期结果.

提前非常感谢.

推荐答案

正如我所 comments 的,我会把这两个圆圈都放在SVG中.对于图像,您可以使用clipPath将其切割成圆形.

对于另一个圆圈,我使用了一个面具,这样你就可以看到它了,因为面具在它上面切了一个圆形的洞.

在css中,我为SVG添加了一个背景.您可以将其删除

svg{width:300px; background:#efefef}
<svg viewBox="0 0 60 40">
  <defs>
    <mask id="m">
      <rect fill="white" x="0" y="0" width="100" height="40" />
      <circle cx="40" cy="20" r="18" fill="blabk" />
    </mask>
    <clipPath id="clip">
      <circle cx="40" cy="20" r="16" fill="00f" />
    </clipPath>
  </defs>
  <circle opacity="1" cx="20" cy="20" r="16" fill="#F6BB43" mask="url(#m)" />

  <image href="https://assets.codepen.io/222579/darwin300.jpg" x="21" y="2" width="35" height="35" clip-path="url(#clip)" />
</svg>

Html相关问答推荐

Tailwincss:自动设置网格高度

<;img>;和具有负边距的元素的堆叠顺序

带有MathJax SVG的HTML代码在XHTML中不起作用

文本css后面未显示背景 colored颜色

在TWebLabel标题中设置换行符/换行符的方法?

如何解决水平塌陷问题?

多次使用组件时计数Angular 14中嵌套数组的指令

如何将图像放在其内部按钮下方

如何将 元素与常规文本垂直对齐

如何使用 Flutter 构建 Chrome 扩展?

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

如何从 div 内的属性中提取 href 和文本

我真的需要一个容器来让行和列正常工作吗? ( bootstrap 程序 v5)

BeautifulSoup用名称列表的findall无法找到另一个目标后面的目标

Sass 混合动画未正确应用

如何垂直平移一个元素,使其新位置位于另外两个元素之间?

将图像的高度限制为固定的纵横比,并在超过时使用 object-fit

在 jinja 模板内的 html 表中嵌套 For 循环

font awesome 的 CDN/CSS 如何工作?

动态使用时波浪号不转换为绝对路径