SVG路径弧元素不起作用答案

【问题标题】：SVG path arc elements not workingSVG路径弧元素不起作用
【发布时间】：2015-09-08 09:29:58
【问题描述】：

我正在尝试使用 SVG 路径绘制甜甜圈。我通过绘制两条弧线和一条线来做到这一点。第一个弧是外圆。它工作正常，直到半径很高。当外圆半径减小时，甜甜圈不会出现。

<svg height="400" width="400">
  <path d="M 200 143 A 57 57 0 1 1 199.99994299999997 143 L 199.9999772 177.2000000000114 A 22.8 22.8 1 1 0 200 177.2 z" fill="transparent" stroke="blue" />
</svg>

以下屏幕截图显示了原始图像。

我的代码在this jsfiddle。

【问题讨论】：

标签： javascript svg

【解决方案1】：

问题是你只关闭了第二个弧。在绘制第二个圆弧之前，您应该关闭第一个圆弧。

演示：

<svg height="400" width="400">
  <path d="M 200 143 A 57 57 0 1 1 199 143 z M 199.9999772 177.2000000000114 A 22.8 22.8 1 1 0 200 177.2 z" fill="transparent" stroke="blue" />
</svg>

【讨论】：

【解决方案2】：

我不能 100% 确定您打算画什么，但 SVG 和圆弧出现的一个问题是，当您尝试绘制一个完整的圆时，您最终会得到起点和终点重合，这对于渲染引擎意味着路径段是一个空操作（是的，很奇怪）并且不会被渲染。要解决这个问题，请使用 2 个弧线。

<!DOCTYPE html>
<html>
<body>


<svg height="400" width="400">
      <path d="M 200 143 A 57 57 0 1 1 200 257 A 57 57 0 1 1 200 143Z L 200 177 A 22.8 22.8 0 1 0 200 222.6 A 22.8 22.8 0 1 0 200 177 z" fill="transparent" stroke="blue" />
 </svg>

</body>
</html>

你的内圈也有一个小的（1度）倾斜（第三个参数），我认为这是无意的。如果您不想要那条垂直线，请将 L 替换为 M。

【讨论】：