SVG Path not filling

I have created a function that converts dxf to svg. We where working with maker.js for the chaining and removing duplicates, but this didn't always work. Therefor we moved on to custom.

The result SVG is below, where we combined x/y in a single path when they are close enough, so creating layer paths.

The path isn't filling correctly on some occasions, like the one below. Where should we look in the path to get a fully filled path layer?

<svg width="112mm" height="94mm" viewBox="2313.0507 -1099.573 112 94" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;  stroke: #000;stroke-width: 1.5px;"><g id="importedPart" transform="scale(1,-1)" fill-rule="evenodd" style="stroke-linecap:round;stroke-linejoin:round;fill:#c0c0c0;fill-rule:evenodd;"><path d="M2425.0507,1075.7029 L2425.0507,1029.4431 M2425.0507,1075.7029 A10,10 0 0,1 2417.8574,1085.301M2371.8574,1099.1711 L2417.8574,1085.301 M2371.8574,1099.1711 A10,10 0 0,1 2366.2441,1099.1711M2366.2441,1099.1711 L2320.2441,1085.301 M2320.2441,1085.301 A10,10 0 0,1 2313.0507,1075.7029M2313.0507,1029.4431 L2313.0507,1075.7029 M2313.0507,1029.4431 A10,10 0 0,1 2320.2441,1019.8451M2366.2441,1005.975 L2320.2441,1019.8451 M2366.2441,1005.975 A10,10 0 0,1 2371.8574,1005.975M2371.8574,1005.975 L2417.8574,1019.8451 M2417.8574,1019.8451 A10,10 0 0,1 2425.0507,1029.4431" id="4bcf575e-280a-415e-a59c-d62ff0dc0a80"></path><circle cx="2329.360729224585" cy="1070.833023906307" r="8.5" style="stroke-linecap:round;stroke-linejoin:round;fill:#FFF;fill-rule:odd-even;"></circle><circle cx="2408.740729224585" cy="1034.313023906308" r="8.5" style="stroke-linecap:round;stroke-linejoin:round;fill:#FFF;fill-rule:odd-even;"></circle></g></svg>

As I've commented: Your path is probably drawn in Illustrator or similar. You need to draw it again, this time without lifting the pen except for the 2 circles.

Next I've rewritten the path by removing the useless move to (M) commands (where you lifted the pen) and reversing some of the fragments.

<svg width="112mm" height="94mm" viewBox="2312 -1105 115 105" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;  stroke: #000;stroke-width: 1.5px;">
  <g id="importedPart" transform="scale(1,-1)">
    <path fill="silver" d="M2425.0507,1029.4431L2425.0507,1075.7029 
   A10,10 0 0,1 2417.8574,1085.301  L2371.8574,1099.1711
   A10,10 0 0,1 2366.2441,1099.1711  L2320.2441,1085.301
   A10,10 0 0,1 2313.0507,1075.7029
   L2313.0507,1029.4431
   A10,10 0 0,1 2320.2441,1019.8451 L2366.2441,1005.975
   A10,10 0 0,1 2371.8574,1005.975    L2417.8574,1019.845
   A10,10 0 0,1 2425.0507,1029.4431" />

    <circle cx="2329.360729224585" cy="1070.833023906307" r="8.5" style="fill:#FFF;"></circle>
    <circle cx="2408.740729224585" cy="1034.313023906308" r="8.5" style="fill:#FFF;"></circle>
  </g>
</svg>

Also: letting you know that instead of drawing 2 white circles you can draw 2 circular holes in the path above. In the next example I draw the circles as paths and vI'm concatenating the d attribute for those paths to the main shape's d aribute. Since you have fill-rule : evenodd those circles would apear as holes:

<svg width="112mm" height="94mm" viewBox="2312 -1105 115 105" version="1.1" xmlns="http://www.w3.org/2000/svg" style="stroke-linecap:round;stroke-linejoin:round;fill-rule:evenodd;  stroke: #000;stroke-width: 1.5px;">
  <g id="importedPart" transform="scale(1,-1)">
    <path fill="silver" d="M2425.0507,1029.4431L2425.0507,1075.7029 
   A10,10 0 0,1 2417.8574,1085.301  L2371.8574,1099.1711
   A10,10 0 0,1 2366.2441,1099.1711  L2320.2441,1085.301
   A10,10 0 0,1 2313.0507,1075.7029
   L2313.0507,1029.4431
   A10,10 0 0,1 2320.2441,1019.8451 L2366.2441,1005.975
   A10,10 0 0,1 2371.8574,1005.975    L2417.8574,1019.845
   A10,10 0 0,1 2425.0507,1029.4431
   
   M2337.860729224585 1070.833023906307 A8.5 8.5 0 0 1 2320.860729224585  1070.833023906307 A8.5 8.5 0 0 1 2337.860729224585  1070.833023906307
   
   M2417.240729224585 1034.313023906308 A8.5 8.5 0 0 1 2400.240729224585 1034.313023906308 A8.5 8.5 0 0 1 2417.240729224585 1034.313023906308 "/>
  </g>
</svg>

SVG Path not filling

1 Answers