CODEWITHSUNDEEP
svg
devAhsan
devAhsan

Reputation: 263

Incorrect filling in SVG paths with arcs

I have shapes made out of svg paths of which I want to fill the inside of. But I am having issue if arcs are involved.

Expected Result

enter image description here

Current Result

enter image description here

HTML

<path class="polygon nofill" d="M 3399.999988793259 1394.9999692097963 A 3220.8276 3220.8276 0 0 0 1474.9999692097967 3319.9999887932586 M 5905.000011783687 1394.9999560225888 A 4839.2884 4839.2884 0 0 0 3399.999988216311 1394.9999560225888 M 5905.000004208143 1395.0000282015517 A 9331.1683 9331.1683 0 0 0 1475.000125700969 3320.0000323260156 " style="stroke-width: 8"/>
<path class="polygon" d="M 4874.999880183425 2775.000054445585 A 2046.6629 2046.6629 0 0 0 3475.000031514362 2775.0000865849615 M 4874.999985343183 2775.0000068346008 A 3369.9299 3369.9299 0 0 0 6504.999793165401 4404.999814656818 M 3474.9999727218064 2775.0001243226507 A 5029.8359 5029.8359 0 0 0 6504.999989335176 4405.000073299978 " style="stroke-width: 8"/>
<path class="polygon" d="M 2329.9999143902046 3650.000039536792 A 1673.1571 1673.1571 0 0 0 1330.000007397411 4650.000002692427 M 4229.9998864060235 3650.0000507333134 A 3670.5179 3670.5179 0 0 0 2330.000020292689 3650.0000757333178 M 1330.0000006966607 4649.999909899181 A 5926.0946 5926.0946 0 0 0 4230.000008277293 3650.0000122597635 " style="fill:url(#pattern);stroke-width: 8"/>

Solutions I could find suggest to change the order of drawing path, but the data is dynamic and I can't know beforehand how the arcs will be curving.

Upvotes: 0

Views: 326

Answers (1)

enxaneta
enxaneta

Reputation: 33024

It's the way you are drawing the paths. Please take a look at the d attribute of any of your paths. For every side of the shape you are moving to a different point (the M command) and next draw the curve. In order to be able to fill the shapes you draw you need to move the pointer to one point and draw the shape without lifting your finger mouse.

Next I've rewritten your paths. Please take a look at the d attribute: there are no M commands (except the first one) meaning that the shape was drawn continuously. without interruptions.

svg{border:1px solid;width:300px}
<svg id="theSVG" viewBox="1200 1200 5500 3600" >
  <path class="polygon nofill" d="M 5905.000011783687 1394.9999560225888 
A 4839.2884 4839.2884 0 0 0 3399.999988216311 1394.9999560225888
A 3220.8276 3220.8276 0 0 0 1474.9999692097967 3319.9999887932586 
A 9331.1683 9331.1683 0 0 1 5905.000004208143 1395.0000282015517 " style="stroke-width: 8" />

<path class="polygon" d="M 4874.999880183425 2775.000054445585 
A 2046.6629 2046.6629 0 0 0 3475.000031514362 2775.0000865849615 
A 5029.8359 5029.8359 0 0 0 6504.999989335176 4405.000073299978 
A 3369.9299 3369.9299 0 0 1 4874.999985343183 2775.0000068346008" 
style="stroke-width: 8"/>

<path class="polygon" d="M 4229.9998864060235 3650.0000507333134 
A 3670.5179 3670.5179 0 0 0 2330.000020292689 3650.0000757333178 
A 1673.1571 1673.1571 0 0 0 1330.000007397411 4650.000002692427 
A 5926.0946 5926.0946 0 0 0 4230.000008277293 3650.0000122597635 " style="stroke-width: 8"/>
 

</svg>

Upvotes: 2

Related Questions