Javascript 将背景图像添加到SVG圆圈

我想将背景图像添加到我的SVG圆圈中。但我不能让它工作。以下是我到目前为止的情况：

再次编辑：

这就是我所拥有的。它几乎起作用了：

    // SVG -> G with margin convention
    var svg = d3.select('.clock').append('svg');
    var g = svg.append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    // Clock Face
    var face = g.append('g')
      .datum(clock)
      .attr('transform', 'translate(' + w / 2 + ',' + r + ')');

    const svgInner = face.append('svg')
    .attr({
      height: function (d) { return (d.r * 2); },
      width: function (d) { return (d.r * 2); },
    });

    svgInner.append('circle')
    .attr({
    r: function (d) { return d.r; },
    fill: 'url(#image)',
    height: function (d) { return (d.r * 2); },
    width: function (d) { return (d.r * 2); },
    });

    svgInner.append('defs')
    .append('pattern')
    .attr('id', 'image')
    .attr('width', function (d) { return (d.r * 2); })
    .attr('height', function (d) { return (d.r * 2); })
    .attr('patternContentUnits', 'objectBoundingBox')
    .append('image').attr({
      transform: 'translate(-63, -63)',
    })
    .attr({
      height: function (d) { return (d.r * 2); },
      width: function (d) { return (d.r * 2); },
      'xlink:href': 'image.jpg',
    });

---

我唯一需要修正的是图像的位置（它应该在圆圈中，但它被移到了右下角，如图所示。

这将回答您的问题：@Thinker我编辑了我的帖子。您能再看一看吗？您能发布完整的代码吗？您能准确指定什么“不起作用”吗.预期的结果是什么？我又更新了。谢谢你们的帮助