为何SVG图案中的图片无法实现平铺？技术咨询

问题出在哪 #

1. 单位系统不匹配：你给pattern加了patternUnits="userSpaceOnUse"，但设置width="50%"这类百分比时，这个百分比是按SVG视口（100px×100px）计算的，不是你设定的±1绘图坐标系。比如50%对应50px，映射到绘图坐标系里远大于1单位，导致图案只显示极小一块，看起来像没平铺。
2. 图片未做适配：2x2像素的image没设尺寸和定位，默认会把自身像素直接对应绘图坐标系的单位，也就是占2x2的绘图单位，超出了你要的±1范围，再加上pattern的尺寸混乱，自然会偏移甚至消失。
3. 多边形范围有限：你用的多边形只覆盖x=0到1、y=-1到1的区域，本身范围就小，图案偏移后自然看不到内容。

修复后的代码 #

要实现按比例缩放并全屏平铺，调整pattern和image的属性即可：

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
  viewBox="-1 -1 2 2" width="100" height="100"
  xmlns="http://www.w3.org/2000/svg"
  >
    <defs>
        <!-- 按5%比例缩放：1单位内重复20次，所以pattern宽高设为0.05 -->
        <pattern id="img1" width="0.05" height="0.05"
                 patternContentUnits="userSpaceOnUse">
            <image
                href="file:///tmp/test.png"
                width="0.05" height="0.05"
                x="-1" y="-1"
                />
        </pattern>
    </defs>
    <!-- 先换成覆盖整个±1范围的矩形，方便看效果 -->
    <rect x="-1" y="-1" width="2" height="2" fill="url(#img1)" />
    <!-- 保留原多边形的话，取消下面注释即可 -->
    <!-- <polygon points="0.0,0.0 1,-1, 1,1" fill="url(#img1)" /> -->
</svg>

关键调整点 #

• pattern的宽高：设为0.05对应你要的5%比例（1÷5%=20次），这样在1单位长度内会重复20次，整个±1范围的轴上会重复40次。如果要在整个2单位的轴上重复20次，把宽高改成0.1就行。
• patternContentUnits="userSpaceOnUse"：让图案内容的尺寸直接对应绘图坐标系的单位，避免单位转换混乱。
• image的定位与尺寸：把x和y设为-1，确保图案从绘图原点的左下侧开始铺，同时给image设和pattern一样的宽高，保证缩放比例一致。
• 用矩形测试：原多边形范围太小，先换成全屏矩形能直观验证平铺效果，确认没问题再换回多边形。

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