I am trying to make an arc like cut at the right of svg circle.

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:

Changed, cx="20" to cx="30"

Also adding,

margin-left: -8px; and border-left: 4px solid #fff to .ant-avatar makes the avatar icon to distort (loose its original size) of the right avatar circle.

.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>

But this doesn't give the expected output as there needs to be arc like cut. Kindly help me to achieve the result making the svg circle with right arc as like the given expected result.

Big thanks in advance.

推荐答案

As I've commented I would put both circles in svg. For the image you can use clipPath to cut it in a circle shape.

For the other circle I'm usinga mask so that you can see through, since the mask is cutting a circular hole in it.

In CSS I've added a background to the svg. You can remove it

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相关问答推荐

同一个元素中的同一个类

如何在Pandas <1.4 中隐藏索引级别

Flexbox 结合垂直溢出不能正常工作

防止 CSS 影响子视图

缩进线,如果它被 destruct (因为只有很少的空间可用)

实现了特定的布局,但我得到了不同的东西

当文本比 React 中的输入本身长时,如何以编程方式显示 HTML 输入元素的最左侧内容

用图像浮动 div 会产生额外的空间

在FORM中使用DIV是否正确?

输入类型按钮 - 标签与值

删除元素上的样式

* * CSS Select 器有什么作用?

使用 bootstrap css 将两个 div 水平并排居中对齐到页面

如何垂直显示范围输入滑块

使用 CSS td 绝对宽度,位置

使用jQuery如何获取目标元素上的点击坐标

DOM ID 中允许使用哪些字符?

如何zoom 嵌入 标签的顽固 SVG?

如何使弹性项目不填充弹性容器的高度?

在 Django 站点中将 HTML 渲染为 PDF