Javascript D3使用图案用图像填充形状

我试图用D3.js创建一个圆形化身，但我无法让我的图像显示在我的圆圈中。我使用svg模式def试图用图像填充圆圈

谁能告诉我下面我做错了什么？多谢各位

var config = {
    "avatar_size" : 48
}

var body = d3.select("body");

var svg = body.append("svg")
        .attr("width", 500)
        .attr("height", 500);

var defs = svg.append('svg:defs');

defs.append("svg:pattern")
    .attr("id", "grump_avatar")
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("patternUnits", "userSpaceOnUse")
    .append("svg:image")
    .attr("xlink:href", 'images/avatars/avatar_grumpy.png')
    .attr("width", config.avatar_size)
    .attr("height", config.avatar_size)
    .attr("x", 0)
    .attr("y", 0);

var circle = svg.append("circle")
        .attr("cx", config.avatar_size)
        .attr("cy", config.avatar_size)
        .attr("r", config.avatar_size)
        .style("fill", "#fff")
        .style("fill", "#grump_avatar");

“Fill”是一个样式属性，您必须使用CSS

url（）

符号来引用模式元素

一旦你解决了这个问题，你会发现你的尺寸也错了——除非你的意图是在圆圈中平铺四个阿凡达副本

顺便说一句，我通常会将此作为一个评论，并将其标记为一个简单的打字错误作为结尾，但我想尝试一下：

var配置={
“头像大小”：48
}
变量主体=d3。选择（“主体”）；
var svg=body.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）；
var defs=svg.append（'svg:defs'）；
defs.append（“svg:pattern”）
.attr（“id”、“agrup_avatar”）
.attr（“宽度”，配置化身大小）
.attr（“高度”，配置化身大小）
.attr（“patternUnits”、“userSpaceOnUse”）
.append（“svg:image”）
.attr（“xlink:href，”http://placekitten.com/g/48/48')
.attr（“宽度”，配置化身大小）
.attr（“高度”，配置化身大小）
.attr（“x”，0）
.attr（“y”，0）；
var circle=svg.append（“circle”）
.attr（“cx”，配置化身大小/2）
.attr（“cy”，配置化身大小/2）
.attr（“r”，配置化身大小/2）
.style（“填充”、“fff”）
.style（“填充”、“url（#咕噜咕噜阿凡达”）
如果图像比例与圆形不一样怎么办？也许
保留Aspectratio=“xMidYMid-slice”
会给它增加一点不错的触感。