SVG图案填充<rect>正常，<polygon>缩放异常解决方案咨询

问题出在你的<pattern>配置逻辑上，核心原因是**patternContentUnits="objectBoundingBox"的行为特性**：这个属性会让图案尺寸基于被填充元素的**边界框（Object Bounding Box）**按比例计算，而非SVG画布的绝对像素。

为什么矩形正常、多边形异常？ #

• 你的<rect>是512×512，边界框宽高比为1:1，pattern设置的width="512"和height="512"会被解析为「512倍边界框尺寸」，再配合transform="scale(0.00195512)"（约等于1/512），刚好让图案完整适配矩形。
• 而你的<polygon>边界框范围是(0,0)到(512,256)，宽高比为2:1。pattern的width="512"和height="512"会被解析为「512倍多边形边界框宽度」和「512倍多边形边界框高度」，再叠加缩放后，图案就被缩至极小。

解决方案：改用userSpaceOnUse #

将图案的坐标空间切换为基于SVG画布的绝对像素，这样无论填充什么元素，图案的尺寸和位置都与画布对齐。具体修改步骤：

1. 将<pattern>的patternContentUnits="objectBoundingBox"改为patternContentUnits="userSpaceOnUse"
2. 移除<use>元素上的transform="scale(0.00195512)"，此时图案直接使用画布像素尺寸
3. 确保<pattern>的width/height与SVG画布尺寸一致（512×512），并设置x="0"、y="0"

修改后的完整SVG代码：

<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" 
pointer-events="none">
<!-- Rectangle filled correctly with the pattern -->
<rect width="512" height="512" fill="url(#pattern0_1011_2713)" />

<!-- Polygon with fixed pattern scaling -->
<polygon points="256,0 512,128 256,256 0,128"
       fill="url(#pattern0_1011_2713)"
       style="pointer-events: auto;" />

<defs>
  <pattern id="pattern0_1011_2713" patternContentUnits="userSpaceOnUse" 
           width="512" height="512" x="0" y="0">
    <use xlink:href="#image0_1011_2713" width="512" height="512" />
  </pattern>
<image id="image0_1011_2713" xlink:href="data:image/png;base64,..." width="512" 
height="512" />
</defs>
</svg>

额外说明 #

如果需要让图案在多边形内居中或调整位置，可以通过<pattern>的x/y属性，或给<use>添加transform来微调，当前配置已能保证图案与填充矩形时的效果完全一致。

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