创建显示PNG图像的圆形SVG元素

Question

我正在用d3.js创建一个力导向图，其中每个节点应在带有白色背景的圆圈内显示一个PNG图像。我找不到满足该节点所有三个要求的解决方案：

• 形状=圆
• 背景=白色
• 填充= PNG图片

我尝试了两个SVG元素“ image”和“ circle”，但无法实现白色背景。

第一次尝试：

defs.append('clipPath')
    .attr('id', 'avatar-clip')
    .append('circle')
    .attr({
        cx: 0,
        cy: 0,
        r: image_size/2
    });

var node = svg.selectAll('.nodes')
    .data(nodes)
    .enter()
    .append('image')
    .attr({
        class: 'node',
        href: 'image.png',
        x: -image_size/2,
        y: -image_size/2,
        width: image_size,
        height: image_size,
        'clip-path': 'url(#avatar-clip)'
    })
    .call(force.drag)
    .on('dblclick', connectedNodes);

第二次尝试：

defs.append('pattern')
    .attr({
        id: 'circle_img',
        patternUnits: 'userSpaceOnUse',
        x: -image_size/2,
        y: 60-25,
        width: image_size,
        height: image_size
    })
    .append('image')
    .attr({
        href: 'image.png',
        width: image_size,
        heigth: image_size
    });

var node = svg.selectAll('.nodes')
    .data(nodes)
    .enter()
    .append('circle')
    .attr({
        class: 'node',
        cx: 0,
        cy: 0,
        r: image_size/2,
        fill: 'url(#circle_img)'
    })
    .call(force.drag)
    .on('dblclick', connectedNodes);

编辑：与this similar question的不同之处在于，我具有透明的PNG，并且我想确保圆圈具有白色背景。