&引用；“神经质”；Safari上SVG内字体的大小调整

当我将

元素放入SVG文件中，然后调整SVG图像的大小时，Safari会平滑地调整图形元素的大小，但会以“跳跃”的方式调整字体的大小。这种Safari行为使得文本和非文本元素很难对齐，因为随着页面大小的调整，文本大小相对于其他元素会发生变化

在Safari中是否有一种解决方法可以强制平滑调整字体大小，或者，如果不可能，至少可以以相同的跳跃方式调整字体和非字体元素的大小，这样它们就不会错位

下图就是一个例子。如果我在Firefox或Chrome中调整页面大小，绿色、橙色和粉色框相对于下面的文本保持在同一位置。如果我在Safari中水平收缩页面以便调整图像的大小，则文本会不断水平跳跃，这会导致某些浏览器大小的文本和框未对齐

图片来自这里：

---

FWIW，我能找到的关于这种行为的唯一参考是一篇9年前的悲伤帖子，抱怨同样的问题。它太旧了，Chrome在从WebKit转出之前也有同样的问题-（

啊哈！在尝试了各种CSS调整后，我找到了一个简单的解决方案：在Safari上解决了文本大小调整问题，而不会明显降低Chrome或Firefox中的任何内容

为了解释它的工作原理，下面是这样说的：

在SVG中，当文本按比例放大或缩小时，浏览器会计算最终结果 文本的大小（由指定的字体大小和 应用的比例）并从 平台的字体系统。但如果您要求字体大小为9，则 比例为140%时，生成的字体大小为12.6并不明确 存在于字体系统中，因此浏览器将字体大小舍入为12 相反，这会导致文本的阶梯缩放

但是

geometricsprecision

属性-完全受渲染支持时 引擎-可以流畅地缩放文本。对于大比例因子， 您可能会看到不太漂亮的文本渲染，但大小是多少 您不会期望向上或向下舍入到最接近的字体大小 由Windows或Linux支持

这里是SVG图像的更新版本，它没有显示Safari问题。Safari相对于Chrome/FF（字体宽度不完全相同）似乎仍然有一个较小的字体大小测量错误，但它比我以前看到的跳跃行为要好得多