On iOS (ALL Browsers), the glow impact (through text-shadow and animation) would not render on SVG .
The identical code works as anticipated on desktop browsers (Chrome, Edge) and Android browsers.
I’ve tried utilizing -webkit prefixes and totally different strategies of CSS for the glowing impact, however none work on iOS Browsersenter picture description right here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta identify="viewport" content material="width=device-width, initial-scale=1.0">
<title>SVG Glowing Textual content</title>
<model>
@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: middle;
animation: glowAnimation 2s infinite alternate;
}
svg {
width: 100%;
top: 100%;
}
</model>
</head>
<physique>
<part id="residence">
<svg viewBox="0 0 200 100" width="100%" top="100%">
<path id="curve" d="M 0 50 C 100 0 100 100 200 50" fill="none" />
<textual content>
<textPath xlink:href="#curve" startOffset="50%" text-anchor="center" font-size="12" font-family="Montserrat" fill="#fff">
Legend Barber
</textPath>
</textual content>
</svg>
</part>
</physique>
</html>
Utilizing CSS text-shadow for the glowing impact:
It really works positive on most browsers (desktop, Android) however doesn’t render on iOS Telephones.
Utilizing -webkit prefixes on CSS properties:
The prefix -webkit-filter and different -webkit adjustments had no impact.
Modifying the SVG textual content properties like font dimension, shade, and path for higher compatibility:
Nonetheless no glow impact on iOS Telephones.
