使用不同角度绘制圆弧时，SVG 路径不正确
[英]SVG path is not proper when draw Arc using different angle
问题描述
I am using HTML5 SVG and draw doughnut shape with different angle (90 and 120).
我正在使用 HTML5 SVG 并以不同的角度（90 和 120）绘制甜甜圈形状。 But using angle 120, The doughnut path is not proper.但是使用角度 120，甜甜圈路径不正确。 This is my code.这是我的代码。
<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>
Let me know what i did mistake on this让我知道我在这方面做错了什么
Thanks,谢谢，
Bharathi.巴拉蒂。
1 个解决方案
解决方案1
1 2017-01-23 08:19:24
In your second path, the inner arc should be rotated:在您的第二条路径中，应旋转内弧：
A 94 94 45 1 0 754.4063879557373 295 z A 94 94 45 1 0 754.4063879557373 295 z
Maybe someone more knowledgeable than me can explain the math behind it, and why it is like this...也许比我更有见识的人可以解释它背后的数学原理，以及为什么会这样......
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.