如何在背景颜色/填充上叠加 SVG 背景图案图像？

Question

我正在尝试创建一个带有白色圆圈和圆圈内的产品图像的绘图图。 https://observablehq.com/@dersteppenwolf/test-images

我发现这篇有用的文章并使用了图案背景。这让我的透明 .png 图像进入我的圈子，但现在我不知道如何设置背景颜色。现在，我只有带有描边环的产品图片。

如何将我的圆圈背景设为白色？

这是我的问题的屏幕截图：

https://i.stack.imgur.com/Ampsg.png

我尝试过的：

1. 我尝试使用 CSS 设置圆形背景颜色。没有骰子。
2. 在创建填充图案时，我尝试添加一个带有白色填充的矩形
3. 尝试在图像元素上设置填充。

        let defs = svg.append('defs')
        defs.selectAll('pattern')
            .data(data)
            .enter()
            .append('pattern')
            .attr("id", function(d) {
            
                console.log('id')
                if ('image' in d) {
                    
                    if (d['image'].length > 3) {

                        return "image"+ btoa(d['image']).replace('==', '');
                    }
                }

                return ''
            })
            .attr("width", 1)
            .attr("height", 1)
            .append("svg:image")
            .attr("xlink:href", function(d) {
                
                if ('image' in d) {
                    
                    if (d['image'].length > 3) {

                        return 'http://localhost/index.php/Special:FilePath/' + d['image'] + '?width=200)';
                    }
                }

                return ''
            })
            .attr('fill', function(d) {

                return '#FF0000'
            })
            .attr("width", 32)
            .attr("height", 32);
    ```

Any solutions would be much appreciated.