title: SVG: Circle inside a polygon: Hide overflow
body: <p>I have created a simple figure using svg. 
  Im trying to create a circle within a polygon.</p>
  
  <p><strong>Question:</strong> Is it possible to create a figure inside a polygon? 
  The result I'm looking for is that any overflow from the circle is hidden.</p>
  
  <p>As you can see in the below image, the circle breaks the boundaries of the polygon and the overflow is not hidden. </p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div id="services-component-container" class="col-md-8 col-md-offset-2" style="padding: 0;"&gt;
      &lt;svg id="ny-trakt-container" style="height: 100%; width: 100%; margin: 0 auto; padding: 0;" preserveAspectRatio="xMinYMin" viewBox="0 0 200 100"&gt;
        &lt;polygon class="state-1" points="0,20 48.5,15 48.5,45 0,31" style="fill:#ceffc9;" /&gt;
        &lt;polygon class="state-1" points="0,33 0,80 48.5,85 48.5,47" style="fill:#ceffc9;" /&gt;
        &lt;circle id="ripple-shape" cx="10" cy="20" r="5" /&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/O2k4f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O2k4f.png" alt="enter image description here"></a></p>