Javascript D3.js代码花图像作为圆形背景

我正在使用基于D3.js的CodeFlower。我希望将图像显示为背景，而不是任意颜色，我使用SVG模式成功地做到了这一点

我看到的问题是图像在圆圈中没有居中对齐，这是一种由4个图像组成的平铺布局

如何使其位置居中并很好地覆盖圆

---

您需要更改定义模式的方式。您应该根据应用它的元素来定义它。因此，将

patternUnits

保留为默认的

objectBoundingBox

，并将

宽度和
高度设置为
1

  this.node.enter().append('defs')
        .append('pattern')
            .attr('id', function(d) { return (d.id+"-icon");})  
            .attr('width', 1)
            .attr('height', 1)
            .attr('patternContentUnits', 'objectBoundingBox')
            .append("svg:image")
                .attr("xlink:xlink:href", function(d) { return (d.icon);})
                .attr("height", 1)
                .attr("width", 1)
                .attr("preserveAspectRatio", "xMinYMin slice");

然后还需要将
patternContentUnits
设置为
objectBoundingBox
，并使
具有相同的大小（宽度和高度为
1
）

你能再帮我一件小事吗。。圆圈目前是透明的，我如何才能在圆圈内但图像外的区域填充一些颜色？它在Chrome上对我有效，但我无法在Safari/Firefox上使用。我总是有一个黑色的圆圈，而不是里面有图像的圆圈。谢谢你的帮助。
  this.node.enter().append('defs')
        .append('pattern')
            .attr('id', function(d) { return (d.id+"-icon");})  
            .attr('width', 1)
            .attr('height', 1)
            .attr('patternContentUnits', 'objectBoundingBox')
            .append("svg:image")
                .attr("xlink:xlink:href", function(d) { return (d.icon);})
                .attr("height", 1)
                .attr("width", 1)
                .attr("preserveAspectRatio", "xMinYMin slice");