Html 如何将SVG背景模式图像分层到背景色/填充的顶部？

我试图创建一个带有白色圆圈和圆圈内产品图像的绘图图。

我找到了这篇有用的文章，并使用了模式背景。这使我的透明.png图像进入我的圆圈，但现在我不知道如何设置背景色。现在，我只有产品图片和我的笔划环

如何使我的圆圈背景为白色

以下是我的问题的截图：

我所尝试的：

我试着用CSS设置圆圈的背景色。没有骰子

当我创建填充图案时，我尝试用白色填充附加一个矩形

尝试在图像元素上设置填充

让defs=svg.append（'defs'））
defs.selectAll（'模式'）
.数据（数据）
.输入（）
.append（'模式'）
.attr（“id”，函数（d）{
console.log（'id'））
if（d中的“图像”）{
如果（d['image']，长度>3）{
返回“image”+btoa（d['image']）。替换（'='，''；
}
}
返回“”
})
.attr（“宽度”，1）
.attr（“高度”，1）
.append（“svg:image”）
.attr（“xlink:href”，函数（d）{
if（d中的“图像”）{
如果（d['image']，长度>3）{
返回'http://localhost/index.php/Special:FilePath/“+d['image']+'？宽度=200”）；
}
}
返回“”
})
.attr（'fill'，函数（d）{
返回“#FF0000”
})
.attr（“宽度”，32）
.attr（“高度”，32）；
```
任何解决方案都将不胜感激。

不太熟悉d3，但我认为您可能想尝试在上面添加图像的图案中添加一个带白色填充的圆形或矩形。因为它是先绘制的，所以它将位于z轴上的图像下方，并提供背景。