Javascript SVG-圆形中心图像，无图像填充

我已经在SVG中创建了一个圆圈，并尝试在圆圈中显示图像，当圆圈大小增加时，图像也在增加，但我希望图像保持不变，在不更改图像大小的情况下更改圆圈大小，当前其填充在圆圈中：

这是HTML代码，有人能帮忙吗

---

这个问题的一般答案是，您需要使用

patternUnits=“userSpaceOnUse”

使图案相对于当前坐标系，而不是相对于应用它的对象

例如，在下面的SVG中，我将模式设置为200x200。请注意，无论每个圆的半径是多少，其大小都是相同的。此外，它也独立于大小和圆的位置重复

使用SVG有什么原因吗？为什么不是HTML？是的，我必须使用SVG来制作动画，不能用div来处理那些动画。你想要什么样的动画，我很确定我们可以用CSSAnimation来完成。d3.js就是这样，这就是为什么我试图用SVG实现的原因。为了回答这个问题，我尝试了这个方法，但另一种方法是使用剪辑路径来处理，