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 下无法正常选择,见动图:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F080941a0-43cd-4db0-831d-0fb95d84b8f6%2Fimage.gif%3Fid%3D79b84716-e6ce-4b1c-ad8d-d20d6f183a0d%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DZNC-7_uvITLEBLKNP66SK4x0Y5o-8BQECh61H9VYGpc?table=block&id=79b84716-e6ce-4b1c-ad8d-d20d6f183a0d&cache=v2)
这个 BUG 发现的 Safari 版本是 16.0,使用其他设备进行测试发现 15.x 也存在同样的问题,且 Mac 和 iOS 都存在。
解决方案
Mac
对于 Mac 而已,无意中发现给 SVG 加一个背景颜色就可以解决,见动图:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff384860f-3f6e-4fd5-b42f-c54d32d8bf48%2F0aadd2ef-fe00-40bd-8427-75ae67a8a091%2F20221010170729_rec_.gif%3Fid%3D3f15bb3f-7efe-467e-af4a-08330d377f32%26table%3Dblock%26spaceId%3Df384860f-3f6e-4fd5-b42f-c54d32d8bf48%26expirationTimestamp%3D1722146400000%26signature%3DaHLmYXcG8oo72hn2oNTpGoDa8n9fif3CUctLr02GqEE?table=block&id=3f15bb3f-7efe-467e-af4a-08330d377f32&cache=v2)
因此猜测是因为重绘而导致的。所以这里要想达到不影响 SVG 的样式同时解决这个问题的目的,可以给 SVG 加一个“假背景”,即:
svg {
background: linear-gradient(transparent, transparent);
}
iOS
同样的 iOS 下也存在这个问题,但加背景不起作用了。目前已经有人报告了这个 BUG,只能等待修复了: