如何让SVG填充图案相对于<rect>容器定位？

要让复用的从每个的左上角开始渲染，只需对做两处核心修改：

1. 将patternUnits属性从userSpaceOnUse改为objectBoundingBox
   • 该属性决定图案的参考坐标系：objectBoundingBox会以填充元素（即）的边界框为基准，图案原点自动对齐到元素的左上角，而非整个SVG视图的原点。
2. 将内部图形的坐标改为相对比例值
   • 因为objectBoundingBox下的坐标范围是0到1（对应图案自身的宽高），所以把原来的绝对数值转换成比例即可。比如原cx="25"（图案宽50）对应cx="0.5"，r="22"对应r="0.44"（22/50）。

同时可根据需求调整的width和height为相对比例，以保持图案单元在不同尺寸中显示一致的相对大小（比如原图案高50，对应高度100的，height="0.5"即可匹配原尺寸比例）。

修改后的完整SVG代码：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
   width="400px" height="250px" viewBox="0 0 400 250">
   <defs>
      <pattern id="marbles" width="0.333" height="0.5"
         patternUnits="objectBoundingBox">
         <circle cx="0.5" cy="0.5" r="0.44" fill="plum" stroke="black"/>
      </pattern>
   </defs>
   <rect width="100%" height="100%" fill="teal"/>
   <rect x="10" y="10"  width="150" height="100" fill="url(#marbles)"/>
   <rect x="90" y="120" width="250" height="100" fill="url(#marbles)"/>
</svg>

修改后，两个的图案都会从自身左上角开始平铺，且图案单元的相对大小与原效果一致。

内容的提问来源于stack exchange，提问作者Pilaf T. Pilafian