SVG - 以圆圈为中心的图像，没有图像填充

Question

我在 SVG 中创建了一个圆圈，并尝试在圆圈中显示图像，当圆圈大小增加时，图像也在增加，但我希望图像保持原样，更改圆圈大小而不更改图像大小，目前是填充圈内：

这是HTML代码，有人可以帮忙吗

<svg id="graph" width="100%" height="400px">

  <!-- pattern -->

  <defs>

    <pattern id="image" x="0%" y="0%" height="100%" width="100%"

             viewBox="0 0 512 512">

      <image x="0%" y="0%" width="512" height="512" xlink:href="https://ppcaxis.com/cat-150.jpg"></image>

    </pattern>

  </defs>

    

  <circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />

  <circle id="sd2" class="medium" cx="25%" cy="50%" r="10%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />

<circle id="sd3" class="medium" cx="25%" cy="80%" r="15%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />

</svg>

在这里只挑战我不要在圆圈中调整大小和填充图像。