如何在 SVG 中使用蒙版修正未對齊的圓形切口？

使用 SVG 從影像中剪切圓形部分

您目前嘗試使用剪輯路徑從影像中剪切出圓形部分未正確對齊。為了解決這個問題，我們將探索在 SVG 中使用蒙版的另一種方法。

<code class="svg"><svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"/>
      <circle r="50" cx="180" cy="180" fill="black"/>
    </mask>
  </defs>
  <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
    <image  xlink:href="https://picsum.photos/200/200?image=1069" x="0" y="0" width="200" height="200" />
  </pattern>
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

此程式碼會建立一個背景設定為粉紅色的 SVG。在 defs 元素內部，我們定義了一個名為「hole」的遮罩。這個蒙版由兩個圓圈組成：一個大的白色圓圈代表您想要從圖像中保留的圓形區域，一個較小的黑色圓圈決定剪切。

下一個元素是一個名為「img」的圖案。此圖案指定要用作形狀填滿的影像。我們設定圖案的尺寸以匹配 SVG 的大小，並使用 URL 中的圖像。

最後，我們建立一個填滿 SVG 整個空間的矩形。矩形的填滿設定為引用“img”圖案，然後我們應用“hole”蒙版來切出圓形部分。

以上是如何在 SVG 中使用蒙版修正未對齊的圓形切口？的詳細內容。更多資訊請關注PHP中文網其他相關文章！