如何使用 SVG 路徑剪切圓形影像部分：綜合指南

使用SVG 剪切圓形影像

在嘗試使用SVG 路徑剪切影像的圓形部分時，遇到了未對齊的情況。為了達到您想要的結果，使用 SVG 的替代方法提供了更簡單的解決方案。

以下是程式碼：

<svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"></circle>
      <circle r="50" cx="180" cy="180" fill="black"></circle>
    </mask>
  <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"></image>
  </pattern>
  </defs>
  <!-- create a rect, fill it with the image and apply the above mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)"></rect>
</svg>

此 SVG 方法涉及建立帶有圓孔和圖案的遮罩與影像。然後用圖像圖案填滿矩形並用孔洞遮蓋。這會導致 SVG 容器內的影像出現圓形切口。

以上是如何使用 SVG 路徑剪切圓形影像部分：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！