iOS浏览器中SVG渲染异常问题求助

问题定性 #

这是iOS Safari的已知渲染Bug，并非预期行为。该Bug触发逻辑为：当内联SVG与前置文本共存时，浏览器在文本排版与SVG对齐的像素精度计算中出现偏差，导致SVG内部绘制的图形向左偏移1px。

修复方案 #

以下几种方法可有效解决该问题：

1. 微调SVG的viewBox范围 #

给viewBox添加极小的负偏移，抵消浏览器的计算误差：

Sm
<svg viewBox='-0.001 0 2.001 2' height='1em' width='1em' style='background-color: black'>
  <rect fill='red' x='0' y='0' height='1' width='2' />
</svg>

2. 通过CSS transform修正位置 #

使用transform: translateX微调SVG的整体位置，抵消偏移：

Sm
<svg viewBox='0 0 2 2' height='1em' width='1em' style='background-color: black; transform: translateX(0.5px)'>
  <rect fill='red' x='0' y='0' height='1' width='2' />
</svg>

3. 统一SVG与文本的布局属性 #

将SVG设置为inline-block，并明确垂直对齐方式，避免排版计算冲突：

Sm
<svg viewBox='0 0 2 2' height='1em' width='1em' style='background-color: black; display: inline-block; vertical-align: middle'>
  <rect fill='red' x='0' y='0' height='1' width='2' />
</svg>

4. 替换SVG的引用形式（备选） #

若上述方法不适用，可将内联SVG转为Sprite引用，或使用图标字体替代，绕过iOS Safari的排版计算bug。

内容的提问来源于stack exchange，提问作者bol'shoy