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 加一个背景颜色就可以解决，见动图：
 {
path {
fill: white;
}
}
</style>
<path fill-rule='evenodd' clip-rule='evenodd' d='M81.8182 18.1818V81.8182H18.1818V18.1818H81.8182ZM10 90V10H90V90H10Z'/>
</svg>)
因此猜测是因为重绘而导致的。所以这里要想达到不影响 SVG 的样式同时解决这个问题的目的，可以给 SVG 加一个“假背景”，即：
svg {
background: linear-gradient(transparent, transparent);
}iOS
同样的 iOS 下也存在这个问题，但加背景不起作用了。目前已经有人报告了这个 BUG，只能等待修复了：
