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。 请注意，无论每个圆的半径是多少，它都是相同的大小。 而且，它也独立于圆周的siza和位置重复。

 <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> 

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