Неправильное заполнение SVG-путей дугами

Question

У меня есть формы, сделанные из путей svg, из которых я хочу заполнить внутреннюю часть. Но у меня проблема, если задействованы дуги.

Ожидаемый результат

Current Result

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

Решения, которые я мог найти, предлагали изменить порядок рисования пути, но данные - динамические c, и я не могу заранее знать, как дуги будут изгибаться.

Answer 1

Это то, как вы рисуете пути. Обратите внимание на атрибут d любого из ваших путей. Для каждой стороны фигуры вы перемещаетесь в разные точки (команда M), а затем рисуете кривую. Чтобы иметь возможность заполнять нарисованные вами фигуры, вам нужно переместить указатель в одну точку и нарисовать фигуру, не поднимая пальца мыши.

Затем я переписал ваши контуры. Обратите внимание на атрибут d: здесь нет команд M (кроме первой), что означает, что форма рисовалась непрерывно. без перерывов.

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>