如何在沒有黑色填充的情況下為 SVG 圓圈添加背景圖像？

如何將背景圖像添加到SVG 圓形形狀（不填充黑色）

創建帶有圖像背景的SVG 圓形是可以使用SVG 模式。實作方法如下：

問題：

以下SVG 程式碼嘗試將背景影像，但以黑色填滿圓形：

<circle ... fill="url('images/word-cloud.png')"></circle>

解決方案：

至使用影像填充，採用SVG模式：

<svg ...>
  <defs>
    <pattern></pattern></defs></svg>

說明：

• 定義一個 中的元素標籤，指定其座標和尺寸。
• 使用 嵌入影像圖案內的元素。
• 使用圓圈上的 fill 屬性來引用圖案的 ID 以套用背景影像。

範例：

將背景圖片新增至ID為「top」的圓圈：

<svg ...>
  <defs>
    <pattern></pattern></defs></svg>

以上是如何在沒有黑色填充的情況下為 SVG 圓圈添加背景圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！