Reputation: 1
I am attempting to generate svgs where all the stuff in the middle of the outer ring of circles is removed. Ideally I would like this to all be in one path. So far I have tried calculating arcs and merging them with circle paths but that gets kinda messy. Is there a way to go through and collapse this all down to just one path or a clean series of paths. [1]: https://i.sstatic.net/72PoK.png
Edit: Added The code for the svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" fill-rule="evenodd" height="1024" version="1.1" width="1024">
<defs/>
<polyline fill="none" points="512,312 512.0,512.0 668,387 512.0,512.0 707,557 512.0,512.0 599,692 512.0,512.0 425,692 512.0,512.0 317,557 512.0,512.0 356,387 512.0,512.0" stroke="green" stroke-width="1"/>
<polygon fill="none" points="512,312 668,387 707,557 599,692 425,692 317,557 356,387" stroke="green" stroke-linejoin="bevel" stroke-width="1"/>
<circle cx="512.0" cy="512.0" fill="none" r="200" stroke="purple" stroke-width="1"/>
<circle cx="512" cy="312" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/>
<circle cx="668" cy="387" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/>
<circle cx="707" cy="557" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/>
<circle cx="599" cy="692" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/>
<circle cx="425" cy="692" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/>
<circle cx="317" cy="557" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/>
<circle cx="356" cy="387" fill="none" r="66.66666666666667" stroke="purple" stroke-width="1"/>
</svg>
Im using a module called Svgwrite to generate this
Upvotes: 0
Views: 231
Reputation: 101820
Here's a modified version of your SVG, where a mask has been used to blank out the interior of all your small outer circles.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" fill-rule="evenodd" height="1024" version="1.1" width="1024">
<defs>
<mask id="blank-circles">
<rect width="100%" height="100%" fill="white"/>
<!-- Holes where each of the outer circles are. -->
<!-- We are using <use> elements so we don't need to define the circles twice. -->
<use xlink:href="#c1" fill="black"/>
<use xlink:href="#c2" fill="black"/>
<use xlink:href="#c3" fill="black"/>
<use xlink:href="#c4" fill="black"/>
<use xlink:href="#c5" fill="black"/>
<use xlink:href="#c6" fill="black"/>
<use xlink:href="#c7" fill="black"/>
</mask>
</defs>
<!-- Mask is applied to all the elements via a parent <g> element -->
<g mask="url(#blank-circles)">
<polyline fill="none" points="512,312 512.0,512.0 668,387 512.0,512.0 707,557 512.0,512.0 599,692 512.0,512.0 425,692 512.0,512.0 317,557 512.0,512.0 356,387 512.0,512.0" stroke="green" stroke-width="1"/>
<polygon fill="none" points="512,312 668,387 707,557 599,692 425,692 317,557 356,387" stroke="green" stroke-linejoin="bevel" stroke-width="1"/>
<circle cx="512.0" cy="512.0" fill="none" r="200" stroke="purple" stroke-width="1"/>
<g fill="none" stroke="purple" stroke-width="1">
<!-- fill and stroke properties are moved to a parent <g> so that they
aren't applied when referenced from the <mask>. -->
<circle id="c1" cx="512" cy="312" r="66.66666666666667"/>
<circle id="c2" cx="668" cy="387" r="66.66666666666667"/>
<circle id="c3" cx="707" cy="557" r="66.66666666666667"/>
<circle id="c4" cx="599" cy="692" r="66.66666666666667"/>
<circle id="c5" cx="425" cy="692" r="66.66666666666667"/>
<circle id="c6" cx="317" cy="557" r="66.66666666666667"/>
<circle id="c7" cx="356" cy="387" r="66.66666666666667"/>
</g>
</g>
</svg>
Upvotes: 0