i am having a hard time to understand how i would generate holes in polygons of an svg file.
this would be an example:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="100%" height="100%"
viewBox="2.529975092957109 41.346880553423844 23.168975806780242 22.134355770447257"
stroke-width="0.00250">
<defs>
</defs>
<polygon fill="black" fill-opacity=".1" stroke="grey" stroke-width="0.002"
stroke-linecap="square"
stroke-linejoin="miter"
points="12.669,52.749 12.669,52.075 14.391,52.075 14.391,52.749 12.669,52.749" />
<polygon fill="black" fill-opacity=".1" stroke="grey" stroke-width="0.002"
stroke-linecap="square"
stroke-linejoin="miter"
points="14.179,52.626 14.179,52.336 13.515,52.336 13.515,52.626 14.179,52.626" />
<polygon fill="red" fill-opacity=".1" stroke="grey" stroke-width="0.002"
stroke-linecap="square"
stroke-linejoin="miter"
points="14.492,52.433 14.492,52.261 14.906,52.261 14.906,52.433 14.492,52.433" />
</svg>what would i need to change here in order to make the polygons intersect each other?
Thanks a lot!
1. I'm transforming the polygons to paths. For this I've changed the points attribute to a d attribute. Also I'm adding the M command at the begining of the string of values.
From:
points="12.669,52.749 12.669,52.075 14.391,52.075 14.391,52.749 12.669,52.749"
to:
d="M12.669,52.749 12.669,52.075 14.391,52.075 14.391,52.749 12.669,52.749"
This is enough, although I would add add the L command for the lines.
d="M12.669,52.749 L12.669,52.075 L14.391,52.075 L14.391,52.749 L12.669,52.749"
2. I concatenate the d attribute of the two paths.
d="M12.669,52.749 12.669,52.075 14.391,52.075 14.391,52.749 12.669,52.749
M14.179,52.626 14.179,52.336 13.515,52.336 13.515,52.626 14.179,52.626"
In this case it will create a hole since the second part of the path (after the second M command) is drawn in the opposite direction (one rectangle drawn clockwise and the other anti-clockwise).
In other cases you may need to add fill-rule="evenodd" to the path.
Please read about the fill-rule attribute
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="100%" height="100%"
viewBox="12 52 3 3"
stroke-width="0.00250">
<path fill="black" fill-opacity=".1" stroke="grey" stroke-width="0.002"
stroke-linecap="square"
stroke-linejoin="miter"
d="M12.669,52.749 12.669,52.075 14.391,52.075 14.391,52.749 12.669,52.749
M14.179,52.626 14.179,52.336 13.515,52.336 13.515,52.626 14.179,52.626"/>
</svg>