CODEWITHSUNDEEP
javascripthtmlsvg
Bharathi
Bharathi

Reputation: 1328

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). But using angle 120, The doughnut path is not proper. 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>

JsFiddle

Let me know what i did mistake on this

Thanks,

Bharathi.

Upvotes: 1

Views: 38

Answers (1)

Holger Will
Holger Will

Reputation: 7526

In your second path, the inner arc should be rotated:

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>

Upvotes: 1

Related Questions