緊急筆記：clipPath完全夠用

by

作為一個SVG磚家，我之前只知道mask，竟不知有clipPath，今在gemini多餘的提示下，我獲知了這個元素。

clipPath的用法比mask要簡單，算法實現與開銷也更簡單，因為clipPath只需要管形狀，不需管填色與線型。

用法跟mask一樣，也是將圖形套一層<clipPath/>標籤後，在需要用到的地方寫入屬性clip-path="#clipid"使之生效。

下面是示例：

<defs>
  <clipPath id="myClip">
    <circle cx="50" cy="50" r="40"/>
    <circle cx="130" cy="50" r="40"/>
  </clipPath>
</defs>

<rect
  width="200"
  height="100"
  fill="blue"
  clip-path="url(#myClip)"
/>

Leave a Comment