SVG：多邊形內的圓：隱藏溢出

我用svg創建了一個簡單的圖。我試圖在多邊形內創建一個圓。SVG：多邊形內的圓：隱藏溢出

問題：是否可以在多邊形內創建圖形？我正在尋找的結果是，任何來自圈子的溢出隱藏。

正如您在下圖中看到的那樣，圓形會打破多邊形的邊界，並且不會隱藏溢出。

<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>

來源

2017-04-27 Vingtoft

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking – Roope

您可以重複使用的多邊形作爲夾路徑溢出多邊形形狀停止循環。

<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>

來源

2017-04-27 17:21:34

SVG：多邊形內的圓：隱藏溢出

回答

相關問題