SVG图片设x=0时偏移22像素，x=-22才对齐的原因咨询

你遇到的这个x=0时图片偏移22px的问题，大概率是以下几个常见原因之一，我帮你逐一拆解：

1. 图片比例与设置尺寸不匹配，触发默认缩放对齐规则 #

SVG里的<image>元素默认的preserveAspectRatio属性值是xMidYMid meet，这个规则会保持图片原始宽高比，将图片缩放到你设置的width/height范围内后，自动居中对齐。

举个例子：如果你的base64图片原始宽度是244px、高度是100px，而你给<image>设置了width="200px"、height="100px"，系统会按比例把图片缩放到200px宽（高度保持100px），因为默认居中对齐，就会在图片左右各留出22px的空白（(244-200)/2=22），看起来就像图片向右偏移了22px。

解决办法：

• 若想强制图片填满设置的尺寸、忽略原始比例，可将preserveAspectRatio改为none：

  <image x="0" y="50" width="200px" height="100px" href="data:image/png;base64,__base64data__" preserveAspectRatio="none" />
  

• 或者根据图片原始比例调整<image>的width/height值，让二者比例一致，这样居中对齐也不会产生空白。

2. SVG坐标系统被viewBox或transform影响 #

如果你的SVG完整代码里设置了viewBox属性，或者给<image>的父元素添加了transform变换，会导致实际用户坐标和视口像素不匹配。比如viewBox设为22 0 378 200时，用户坐标的x=0会对应视口的x=-22位置，反过来视口的x=0就对应用户坐标的x=22，自然会出现偏移。

你可以检查SVG的完整代码，确认是否存在viewBox或transform相关设置。

3. 图片本身带有透明边距 #

这种情况也很常见：你的base64图片在导出时就自带了22px的左侧透明边距，导致即使将x设为0，看起来也像是偏移了。你可以把base64图片解码后查看原始内容，确认是否存在透明边距。

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