SVG: Kreis in einem Polygon: Überlauf ausblenden

Question

Ich habe eine einfache Figur mit Svg erstellt. Ich versuche, einen Kreis innerhalb eines Polygons zu erstellen.

Frage: Ist es möglich, eine Figur innerhalb eines Polygons zu erstellen? Das Ergebnis, das ich suche, ist, dass jeder Überlauf aus dem Kreis ausgeblendet wird.

Wie Sie in der folgenden Abbildung sehen können, bricht der Kreis die Grenzen des Polygons und der Überlauf wird nicht ausgeblendet.

<div class="row"> 
    <div id="services-component-container" class="col-md-8 col-md-offset-2" style="padding: 0;"> 
    <svg id="ny-trakt-container" style="height: 100%; width: 100%; margin: 0 auto; padding: 0;" preserveAspectRatio="xMinYMin" viewBox="0 0 200 100"> 
     <polygon class="state-1" points="0,20 48.5,15 48.5,45 0,31" style="fill:#ceffc9;" /> 
     <polygon class="state-1" points="0,33 0,80 48.5,85 48.5,47" style="fill:#ceffc9;" /> 
     <circle id="ripple-shape" cx="10" cy="20" r="5" /> 
    </svg> 
    </div> 
</div> 

Answer 1

Sie können die Polygone als Clip-Pfad wiederverwenden den Kreis überläuft die Polygonform zu stoppen.

<div class="row"> 
 
    <div id="services-component-container" class="col-md-8 col-md-offset-2" style="padding: 0;"> 
 
    <svg id="ny-trakt-container" style="height: 100%; width: 100%; margin: 0 auto; padding: 0;" preserveAspectRatio="xMinYMin" viewBox="0 0 200 100"> 
 
     <defs> 
 
     <clipPath id="clip"> 
 
      <polygon points="0,20 48.5,15 48.5,45 0,31" /> 
 
      <polygon points="0,33 0,80 48.5,85 48.5,47" /> 
 
     </clipPath> 
 
     </defs> 
 
     <polygon class="state-1" points="0,20 48.5,15 48.5,45 0,31" style="fill:#ceffc9;" /> 
 
     <polygon class="state-1" points="0,33 0,80 48.5,85 48.5,47" style="fill:#ceffc9;" /> 
 
     <circle id="ripple-shape" cx="10" cy="20" r="5" clip-path="url(#clip)"/> 
 
    </svg> 
 
    </div> 
 
</div>