如何实现SVG图案的background-position: center;定位效果？

当然可以实现这个需求！问题的核心在于你当前的SVG填充区域和图案锚点都对齐在左上角，所以窗口缩放时图案会从左上角开始扩展/收缩。只需要简单调整两个地方，就能让图案以SVG中心为基准进行缩放：

修改后的完整代码 #

html { height: 100%; }
body { height: 100%; margin: 0; }
<svg width="100%" height="100%">
  <defs>
    <pattern id="pat" x="-12" y="-12" width="24" height="24" patternUnits="userSpaceOnUse">
      <polygon points="12,5 7,5 7,0 5,0 5,5 0,5 0,7 5,7 5,12 7,12 7,7 12,7 "/>
    </pattern>
  </defs>
  <rect x="-50%" y="-50%" width="200%" height="200%" fill="url(#pat)" />
</svg>

关键修改说明 #

• 调整填充矩形的位置和尺寸：
  把原来从左上角开始的rect改成从-50% -50%起始，宽高设为200%。这样矩形的左上角刚好落在SVG的中心位置，200%的宽高能完全覆盖整个浏览器窗口，确保图案从中心向外延伸覆盖所有区域。
• 偏移图案的锚点：
  你的图案是24x24的尺寸，所以把pattern的x和y设为-12（也就是图案宽高的一半的负值）。这会让图案的中心和矩形的左上角（也就是SVG的中心）对齐，让整个图案的基准点变成SVG的中心。

适配不同图案尺寸的小技巧 #

如果之后你更换了不同尺寸的图案，只需要把pattern的x和y值改成负的图案宽/高的一半即可。比如图案是30x30，就设置x="-15" y="-15"，就能保持居中效果。

内容的提问来源于stack exchange，提问作者Niek Nijland