Question

我正在使用HTML5 SVG并绘制不同角度（90和120）的圆环形状。但是使用角度120，甜甜圈路径是不合适的。这是我的代码。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
 <path id="container1" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 837.5 248 A 164.5 164.5 0 1 1 837.4999999999177 247.99983549999993 L 766.9999999999529 247.99990599999995 A 94 94 1 1 0 767 248 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.0007963267948964958" end="6.2839816339744825" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
 <path id="container2" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 815.4611789225402 330.25 A 164.5 164.5 0 1 1 815.461261172469 330.2498575387798 L 754.4064349556966 294.99991859358846 A 94 94 1 1 0 754.4063879557373 295 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.5243951023931952" end="6.807580409572781" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>

JsFiddle

让我知道我在这个问题上犯了什么错误

谢谢，

Bharathi。

Answer 1

在第二条路径中，应旋转内弧：

A 94 94 45 1 0 754.4063879557373 295 z

也许比我更有知识的人可以解释背后的数学，以及为什么会这样......

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
 <path id="container1" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 837.5 248 A 164.5 164.5 0 1 1 837.4999999999177 247.99983549999993 L 766.9999999999529 247.99990599999995 A 94 94 1 1 0 767 248 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.0007963267948964958" end="6.2839816339744825" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1350" height="500">
 <path id="container2" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 815.4611789225402 330.25 A 164.5 164.5 0 1 1 815.461261172469 330.2498575387798 L 754.4064349556966 294.99991859358846 A 94 94 45 1 0 754.4063879557373 295 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="164.5" start="0.5243951023931952" end="6.807580409572781" innerR="94" counterClockWise="false" x="673" y="248" visibility="visible"></path>
</svg>

使用不同角度绘制圆弧时，SVG路径不正确

1 个答案: