如何在没有黑色填充的情况下向 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中文网其他相关文章！