0

我已经尝试了几个小时通过编辑路径元素来编辑我的 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 输出

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

我搜索了解释如何做到这一点的网站，但没有发现任何有用的东西。

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

帮助将不胜感激。

4

1 回答 1

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

于 2015-11-13T10:36:06.743 回答