带有空隙的SVG多边形

时间：2017-10-18 14:37:52

标签： html d3.js

如何用svg对带孔的多边形进行建模？无法找到任何东西。

enter image description here

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题