Sichrono
Sichrono

Reputation: 1

Cutting out intersecting lines in SVG files using python

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

Answers (1)

Paul LeBeau
Paul LeBeau

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

Related Questions