SVG路径弧元素不起作用

时间：2015-09-08 09:29:58

标签： javascript svg

我正在尝试用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>

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

enter image description here

我的代码位于this jsfiddle。

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

我不是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.

相关问题
最新问题