SVG：多边形内的圆：隐藏溢出

Question

我使用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>

Answer 1

您可以将多边形重复用作剪辑路径，以阻止圆形溢出多边形。

{{1}}