如何使SVG模式随着容器维度的变化而改变其重复次数

Question

我得到了这个测试图像，它显示了两个矩形，每个矩形都填充了16个圆：

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop offset="5%" stop-color="white"/>
<stop offset="95%" stop-color="blue"/>
</linearGradient>
<pattern id="Pattern" x="0" y="0" width=".25" height=".25">
<rect x="0" y="0" width="50" height="50" fill="skyblue"/>
<circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
</pattern>
</defs>
<rect fill="url(#Pattern)" stroke="red" width="200" height="200"/>
<rect fill="url(#Pattern)" stroke="red" width="200" height="400" x="210"/>
</svg>

我想用同样的图案整齐地填充两个矩形，圆圈之间没有空隙，圆圈也没有拉伸。右边的矩形有32个圆圈的空间，我想看到它们都在里面，但有16个有间隙。

有没有办法改变这里的单一图案，让它整齐地用16块瓷砖填充一个矩形，用32块瓷砖填充另一个矩形？这似乎是一件非常基本的事情，但我已经对模式的许多坐标和变换相关参数感到困惑了一段时间，但没有找到任何方法。

在这个简单的例子中，解决这个问题很容易，比如说，为两个矩形制作两个图案，而不是让它们共享一个，并为高矩形的图案调整height。但在我想要使用图案的真实项目中，填充图案的形状上的边界框具有不可预测的尺寸，因此我无法轻易更改瓷砖尺寸来补偿它们的变化。。。据我所知。

我是不是错过了什么？或者，模式系统不是为这种用途而设计的，尽管看起来很简单和基本？也许我应该使用剪辑路径或遮罩或其他东西将我的tilings从一个大的、易于控制的正方形中剪切出来，而不是将图案应用于我想要平铺的每个形状？？

Answer 1

设置patternUnits ="userSpaceOnUse"并将模式参数的维度替换为绝对值。

例如：设置width ="50px"而不是width =".25"

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop offset="5%" stop-color="white"/>
<stop offset="95%" stop-color="blue"/>
</linearGradient>
<pattern id="Pattern" x="0" y="0" width="50px" height="50px" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="50" height="50" fill="skyblue"/>
<circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
</pattern>
</defs>
<rect fill="url(#Pattern)" stroke="red" width="200" height="200"/>
<rect fill="url(#Pattern)" stroke="red" width="200" height="400" x="250"/>
</svg>