修改 SVG 路径

Question

几个小时以来，我一直在尝试通过编辑路径元素来编辑我的 SVG，但我无法获得想要的结果：

代码如下所示：

<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="circle style-scope iron-icon" style="pointer-events: none; display: block; width: 24px; height: 24px;">
    <g class=" style-scope iron-icon">
      <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" class="style-scope iron-icon">
      </path> 
    </g>
  </svg>

渲染后的图形如下所示：

我想做的是编辑里面的黑圈；我需要删除圆圈的右半部分。

我搜索了解释如何操作的网站，但没有找到任何有用的信息。

是否可以将代码粘贴到 SVG 编辑器中，然后编辑图像并取回代码？

将不胜感激。

Answer 1

内圆是用四个三次贝塞尔曲线命令绘制的。只需删除绘制内圆右侧的两个命令即可。

<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="circle style-scope iron-icon" style="pointer-events: none; display: block; width: 24px; height: 24px;">
    <g class=" style-scope iron-icon">
      <path d="M12 7 c-2.76 0-5 2.24-5 5 s2.24 5 5 5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" class="style-scope iron-icon">
      </path> 
    </g>
</svg>

有关三次贝塞尔曲线命令的说明，请访问： http://www.w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands

修改 SVG 路径

Modify SVG path

svg

svg-path