SVG路徑圓弧元素不起作用

我想繪製一個帶有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>

以下屏幕快照顯示原始圖像。

我的代碼是在this jsfiddle。

來源

2015-09-08 vinoth kumar A

問題是你只關閉第二個弧。在繪製第二個弧之前，應關閉第一個弧線。

示範：

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

來源

2015-09-08 09:40:28

我不是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替換L。

來源

2015-09-11 17:30:22

SVG路徑圓弧元素不起作用

回答

相關問題