Два примера простых SVG с text элементом, textPath для создания дуги, а также установленным атрибутом textLength.
В первом случае, цвет текста изменяется при помощи заданного linearGradient. Во втором случае, при помощи самого простого fill атрибута.
Проблема с отображением первого примера наблюдается на IOS устройствах (Iphone 12, Iphone XR, наверное и на других). Браузеры хром и сафари. Скриншоты прикладываю, обрезается текст в примере 1, в примере 2 все хорошо.
На десктопе в браузерах или на андроид устройствах проблема не наблюдается, попробовал порядка 5 разных устройств.
Вопрос - есть ли какое-то решение как поправить отображение цвета с градиентом на IOS устройствах? Причем как видно, в градиенте всего 1 цвет. Возможно есть какой-то css параметр или атрибут градиента, который это фиксит?
Пример 1.
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" color="red">
<defs>
<linearGradient id="fill">
<stop stop-color="red"></stop>
</linearGradient>
</defs>
<text font-size="28" font-style="normal" font-weight="normal" fill="url(#fill)" transform="rotate(-11, 200, 200)" textLength="463.5587568803267"><defs><path id="text" d="M 200 200 m -168, 0 a 168,168 0 1,0 336,0 a 168,168 0 1,0 -336,0"></path></defs><textPath href="#text" xlink:href="#text" textLength="463.5587568803267">Пример текста по кругу</textPath></text>
</svg>
Пример 2.
<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" fill="red">
<text font-size="28" font-style="normal" font-weight="normal" transform="rotate(-11, 200, 200)" textLength="463.5587568803267"><defs><path id="text" d="M 200 200 m -168, 0 a 168,168 0 1,0 336,0 a 168,168 0 1,0 -336,0"></path></defs><textPath href="#text" xlink:href="#text" textLength="463.5587568803267">Пример текста по кругу</textPath></text>
</svg>
Скриншот отображения примера 1 на IOS