如何在 SVG 中使用遮罩從影像中剪切圓形部分？

從影像中剪下圓形部分

嘗試使用 SVG 路徑剪輯影像時，有時會出現影像未正確貼合的情況。若要實現所需的圓形切口，請依照下列步驟操作：

以下 CSS 程式碼使用提供的 SVG 路徑定義剪輯路徑。但是，影像仍然可能無法正確匹配。

<code class="css">.topbar-chat-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  clip-path: url(#topbar-img-svg);
}</code>

要解決此問題，可以採用替代的 SVG 方法。

<code class="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="image.jpg" x="0" y="0" width="200" height="200"></image>
    </pattern>
  </defs>

  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)"></rect>
</svg></code>

此方法在 SVG 中定義一個遮罩，確保圓形切口乾淨。在 中使用 fill="url(#img)"標籤以所需的影像填滿矩形，套用蒙版以達到預期的效果。

以上是如何在 SVG 中使用遮罩從影像中剪切圓形部分？的詳細內容。更多資訊請關注PHP中文網其他相關文章！