在多个圆圈svg下渲染相同的图像

Question

我们有一个UI，要求我们突出显示某些棒（在条形图中），并且在圆内有图像（作为棒的标签）。可能有超过阈值的多个条，因此同一图像应渲染多次。但是，图像不会始终显示在圆心中。对于某些圆圈，它的尺寸超出了范围。

我们正在使用图表，这是我的代码。

  <g className={value == 'active' ? '' : 'hide'} >
  <defs>
    <pattern id="image" height="100" width="100" patternUnits="userSpaceOnUse" viewBox="0 0 10 10">
      <image href={cfg.ASSETS_BASE+"img/baby_samp.jpg"} x="0" y="0" height="10" width="10"></image>
    </pattern>
  </defs>
    <circle preserveAspectRatio="xMaxYMax meet" cx={x + width / 2} cy={y - radius} r={radius} fill="url(#image)"/>
  </g>

我可以使用相同的图像获得多个圆圈，但是每个圆圈的图像内容都不相同（每个圆圈的居中位置不同）

关于如何处理相同问题的任何想法？

第一张图片是预期的