Cutting out intersecting lines in SVG files using python

Question

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.stack.imgur.com/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

I presume that filling the circles with white, doesn't meet your requirements? — Paul LeBeau, Apr 20 '22 at 08:18
Well then the next best approach is would be to use mask elements. If you update your question with your SVG (as shown in the screenshot), I'll show you how. This approach wouldn't be one path though. For that you'll need to calculate your pieces of arc, as you mention in your question. — Paul LeBeau, Apr 21 '22 at 05:30
I have updated the post to contain the code data for the svg, I actually reconsidered my options and using masks could work for me. Thank you for your help! — Sichrono, Apr 22 '22 at 06:01

score 0 · Answer 1 · answered Apr 22 '22 at 08:50

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>

Hmmmm, that does the job pretty well. Does a mask like this keep the transparency aspect of a svg file or nah? Ideally I would like to animate this an make a sprite sheet for it. If not, I'll figure something out. Thank you for your assistance, it was very insightful — Sichrono, Apr 22 '22 at 15:48
If you mean "are the centre of the circles transparent?", the answer is yes. Anything behind them will show through. — Paul LeBeau, Apr 23 '22 at 15:59

Cutting out intersecting lines in SVG files using python

1 Answers1