Safari 踩坑(1)—— SVG Text
date
Aug 11, 2022
slug
safari-svg-text-selection-issue
status
Published
tags
Frontend
Safari
SVG
summary
在 SVG 当中使用 <text> 标签表示的文字在 Safari 下无法正常选择,在 Mac 平台可以通过给 SVG 元素加背景解决。
type
Post
问题介绍
在 SVG 当中使用 <text> 标签表示的文字在 Safari 下无法正常选择,见动图:
这个 BUG 发现的 Safari 版本是 16.0,使用其他设备进行测试发现 15.x 也存在同样的问题,且 Mac 和 iOS 都存在。
解决方案
Mac
对于 Mac 而已,无意中发现给 SVG 加一个背景颜色就可以解决,见动图:
因此猜测是因为重绘而导致的。所以这里要想达到不影响 SVG 的样式同时解决这个问题的目的,可以给 SVG 加一个“假背景”,即:
svg {
background: linear-gradient(transparent, transparent);
}
iOS
同样的 iOS 下也存在这个问题,但加背景不起作用了。目前已经有人报告了这个 BUG,只能等待修复了: