如何解决在 Safari 中动态更新 SVG 文本属性时的重绘问题
我正在开发一个应用程序，它可以动态更新 SVG 中文本元素的内容、字体和大小。这在大多数浏览器中都可以正常工作，但我在 Safari 中遇到了一些奇怪的重绘问题（也在他们的技术预览中）。
当 Safari 重绘文本时，似乎会留下未正确删除的像素轨迹。左边的像素是旧字体的残余。这似乎主要发生在新字体比旧字体小时。调整窗口大小、在窗口上失去焦点、聚焦输入等可以纠正问题，直到再次更改字体。
我创建了一个 CodePen 来演示这个问题：https://codepen.io/frankderouge/pen/LYRvKXM?editors=1010
有多种方法可以解决此问题。第一种是在文本上放置一个宽度和高度为 100% 的透明矩形，然后在对文本进行调整后更改矩形的可见性。这会迫使 Safari 重新绘制整个内容。第二种解决方法是隐藏然后再次显示文本，同时强制完全重绘。
有些事情我也尝试过，但不起作用：
- 使用 text-rendering CSS 属性设置文本渲染方法
- 设置 will-change CSS 属性
- 强制使用硬件加速（
-webkit-transform: translate3d(0,0）呈现文本； - 通过请求文本尺寸（
getBBox、getComputedTextLength）强制重绘 - 将文本包裹在一个组中并应用该组的属性
如果可能，我宁愿避免使用变通方法。我想知道是否有其他人遇到过这个问题并且可能找到了更好的解决方案？
提前致谢！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。