iOS全浏览器中SVG文字发光效果(text-shadow/动画)失效求助
iOS全浏览器中SVG文字发光效果(text-shadow/动画)失效求助
大家好,我最近碰到一个兼容性难题:在iOS的所有浏览器中,通过text-shadow配合动画实现的SVG文字发光效果完全无法渲染,但这套代码在桌面端浏览器(Chrome、Edge)以及安卓浏览器里都能正常显示预期的发光动画效果。
下面是我使用的完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Glowing Text</title> <style> @keyframes glowAnimation { 0% { text-shadow: 0 0 5px #bfff01cc, 0 0 10px #bfff01cc, 0 0 20px #bfff01cc; } 50% { text-shadow: 0 0 10px #bfff01cc, 0 0 20px #ffffffcc, 0 0 30px rgba(230, 230, 230, 0.6); } 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(230, 230, 230, 0.6); } } .glowing-text { font-size: 40px; font-family: 'Montserrat', sans-serif; text-align: center; animation: glowAnimation 2s infinite alternate; } svg { width: 100%; height: 100%; } </style> </head> <body> <section id="home"> <svg viewBox="0 0 200 100" width="100%" height="100%"> <path id="curve" d="M 0 50 C 100 0 100 100 200 50" fill="none" /> <text> <textPath xlink:href="#curve" startOffset="50%" text-anchor="middle" font-size="12" font-family="Montserrat" fill="#fff"> Legend Barber </textPath> </text> </svg> </section> </body> </html>
我已经尝试过以下几种解决思路,但iOS端仍然没有任何发光效果:
- 给CSS属性添加
-webkit-前缀(比如-webkit-filter等相关前缀属性) - 修改SVG文字的字号、颜色、路径等属性,尝试提升兼容性
- 换用不同的CSS写法实现发光效果
有没有朋友遇到过类似的问题,或者知道iOS浏览器对SVG文字的text-shadow有什么特殊限制吗?求指点!
备注:内容来源于stack exchange,提问作者Abdulla
相关产品推荐
相关产品推荐

