使用background-image实现div背景SVG图案错位，如何修复？

问题情况 #

想用background-image给<div>加一个由对角线组成的无缝重复背景，但浏览器里图案拼接处错位断裂。在Illustrator里检查SVG重复是对齐的，放到网页里就出问题。

左图是使用的图案，右图是Illustrator里对齐的效果：
{width=400}

网页里显示的错位效果：
{width=400}

现有代码 #

CSS代码

.about-pattern-container {
    position: absolute;
    width: 55%;
    height: 250px;
    z-index: -1;
    background-image: url("./images/line-pattern-2.svg");
    background-size: 5%;
    right: 7%;
}

SVG代码

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
    <path d="M10,10 L90,10 L90,90 L10,90 Z" fill="none" stroke="black" stroke-width="2"/>
</svg>

问题原因 #

1. SVG viewBox与图案范围不匹配：你的SVG viewBox是150x150，但图案只占了10-90的区域，剩下的空白会被当作图案的一部分参与重复。用百分比background-size时，浏览器按容器尺寸缩放，空白区域会让拼接处的线条对不上。
2. 线条截断+缩放误差：SVG的stroke-width是2，线条一半会延伸到路径外侧，SVG边界会截断这部分线条；再加上百分比缩放带来的小数像素误差，错位就更明显了。

解决方法 #

方法1：修改SVG，让图案填满viewBox #

直接调整SVG的viewBox和路径，让图案刚好占满整个SVG画布，避免空白区域干扰重复：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
    <!-- 让矩形边缘贴合viewBox，同时给stroke留1px空间，避免被截断 -->
    <path d="M1,1 L79,1 L79,79 L1,79 Z" fill="none" stroke="black" stroke-width="2"/>
</svg>

这样SVG本身就是一个完整的无缝单元，重复时边缘能完美对齐。

方法2：用固定像素值替代百分比background-size #

如果不想改SVG，把background-size换成固定像素（比如SVG原始尺寸的1/10，15px），避免百分比缩放带来的小数像素误差：

.about-pattern-container {
    position: absolute;
    width: 55%;
    height: 250px;
    z-index: -1;
    background-image: url("./images/line-pattern-2.svg");
    background-size: 15px; /* 用SVG原始尺寸的1/10，确保无小数误差 */
    right: 7%;
    background-position: 0 0; /* 强制从左上角对齐 */
}

额外优化：给SVG加preserveAspectRatio属性 #

在SVG标签里加上这个属性，确保缩放时比例正确，不会拉伸变形：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150" preserveAspectRatio="xMidYMid slice">
    <path d="M10,10 L90,10 L90,90 L10,90 Z" fill="none" stroke="black" stroke-width="2"/>
</svg>

内容的提问来源于stack exchange，提问作者Jose Zuñiga Vargas