带有空隙的SVG多边形[重复]

【问题标题】：SVG polygon with voids [duplicate]带有空隙的SVG多边形[重复]
【发布时间】：2019-10-16 18:52:05
【问题描述】：

应该如何使用 svg 对带有孔的多边形进行建模？在上面找不到任何东西。

【问题讨论】：

标签： svg

【解决方案1】：

我会屏蔽path：

<!DOCTYPE html>
<html>
  <body>
    <svg width="300" height="300">
      <defs>
        <mask id="mask" >
          <path d="M10 150L10 290L290 290L290 150,L10,150C10 -50,290 -50,290 150Z" fill="white"></path>
          <rect x="30" y="150" width="240" height="120" />
          <circle cx="150" cy="70" r="60"></circle>
        </mask>
      </defs>
      <rect width="300" height="300" x="0" y="0" mask="url(#mask)" style="fill:steelblue" ></rect>
    </svg>
  </body>
</html>

【讨论】：