我正在尝试将 SVG 图标与一些文本内联放置。目前它在我测试过的所有浏览器上都能完美运行，除了 iOS 上的浏览器。
我遇到的问题是，在 iOS 上，有时，与背景相比，SVG 中绘制的形状会向左移动。您可以在这个最小的示例中看到这种情况的发生：
Sm
<svg viewBox='0 0 2 2' height='1em' width='1em' style='background-color: black'>
<rect fill='red' x='0' y='0' height='1' width='2' />
</svg>在大多数浏览器上，红色矩形将与 SVG 背景正确对齐，但在 iOS 上，它将向左对齐 1 像素。
您可能会注意到该行开头的“Sm”，因为似乎需要一定数量的文本才能触发此错误（如果删除“m”，它将在所有浏览器上正确呈现）。
我很好奇这是否是有意的行为，因为我找不到任何对此的参考。如果这是预期行为/已知错误，是否有修复程序可以使 iOS 浏览器正常工作？
如果您的 SVG 图标在 iOS 浏览器上无法正确显示，您可以探索一些潜在的问题和解决方案。
CSS 样式： 如有必要，将 CSS 样式应用到 SVG 或其容器。 iOS 浏览器可能以不同的方式解释样式。尝试显示样式：内联块、垂直对齐或其他相关属性。
缓存问题： 清除 iOS 设备上的浏览器缓存，以确保您正在测试最新版本的代码。
在不同iOS浏览器上测试： 如果您在 Safari 上进行测试，请尝试使用其他 iOS 浏览器（例如 Chrome 或 Firefox），看看问题是否在不同浏览器上仍然存在。 更新iOS： 确保您的 iOS 设备运行最新版本的操作系统。有时，浏览器渲染问题可以通过更新软件来解决。 你的标签语法代码是 100% 正确的，你有 viewBox 和宽度和高度，但你可以尝试这个: