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>

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

Answer 1

这个问题的一般答案是您需要使用patternUnits="userSpaceOnUse" 使模式相对于当前坐标系，而不是相对于它所应用的对象。

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

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

  <!-- pattern -->
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" x="0" y="0" height="200" width="200"
             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>

因此，如果您希望每个圆圈都有一个独立定位的猫图案，则需要专门为每个圆圈定义一个图案。