1

Два примера простых 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

Скриншот отображения примера 2 на IOS

Скриншот примера от Alexandr_TT на IOS

2 ответа 2

1

textLength

Теория -textLength

Атрибут textLength, доступный для элементов SVG и , позволяет указать ширину пространства, в котором будет отображаться текст. Пользовательский агент будет следить за тем, чтобы текст не простирался дальше этого расстояния, используя метод или методы, указанные атрибутом lengthAdjust. По умолчанию регулируется только интервал между символами, но размер глифа также можно настроить, если изменить lengthAdjust.

На практике в разных браузерах текст масштабируется и позиционируется немного по разному. Например FF, Chrome и Safari. Настроив положение текста в одном браузере, в другом браузере текст может быть сдвинут.

Поэтому лучше отказаться от этого атрибута и заменить его на атрибуты CSS

letter-spacing: 4px;
word-spacing: 2px;

Которые работают одинаково во всех браузерах.

Изменяя значения этих атрибутов, а также font-size, startOfset можно достичь желаемого результата.

#txt {
font-size:36px;
font-style:normal;
font-weight:normal;
fill:url(#fill);
letter-spacing: 4px;
word-spacing: 2px;
}
<svg id="svg1" 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" >
  ​<defs>
       ​<linearGradient id="fill">
               ​<stop offset ="0" stop-color="red"></stop>
                ​<stop offset="100%" stop-color="blue"></stop>
       ​</linearGradient>
             <path id="text" stroke="black" fill="none" d="M 200 200 m -168, 0 a 168,168 0 1,
                     0 336,0 a 168,168 0 1,0 -336,0" /> 
  ​</defs>
   ​<text id="txt">
           <textPath href="#text" xlink:href="#text"  startOffset="3%">
              Пример текста по кругу  
           </textPath>
  </text> 
</svg>

UPDATE

Добавил в градиент

gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"

Изменил path для кривой, как-то он был странновато написан

d="M 200 200 m -168, 0 ?? В качестве начальной точки есть дублирующая запись
абсолютных M 200 200 и относительных координат - m -168, 0
может это причина бага Safari в IOS?

Просьба:

У кого есть айфон с Safari, Chrome проверьте пожалуйста код ниже на предмет исчезновения крайних букв.

#txt {
font-size:36px;
font-style:normal;
font-weight:normal;
fill:url(#fill);
letter-spacing: 4px;
word-spacing: 2px;
}
<svg id="svg1" 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" style="border: 1px solid">
  ​<defs>
       ​<linearGradient id="fill" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">
               ​<stop offset ="0%" stop-color="red"></stop>
                ​<stop offset="100%" stop-color="blue"></stop>
       ​</linearGradient>
              <path id="text" stroke="black" fill="none" d="M20,200  A180,180 0 1 0 380,200" />
  ​</defs>        ​<text id="txt">
           <textPath href="#text" xlink:href="#text"  startOffset="10%">
              Пример текста по кругу  
           </textPath>
        </text> 
</svg>

8
  • Это не помогает. Точно также обрезает первую и последнюю букву. Это определенно или баг или какая-то особенность. Обрезает 1 в 1 как в том скриншоте, что прикладывал до этого.
    – Floyat
    20 фев 2022 в 18:59
  • Баг именно в градиенте + тексте дугой, в этой связке. Если одно из двух убрать, то все будет корректно.
    – Floyat
    20 фев 2022 в 19:14
  • @Floyat Обновил ответ. Проверь здесь прямо с айфона, если здесь всё нормально, а у тебя в приложении обрезает, значит где-то баг у тебя в приложении, в вёрстке. 20 фев 2022 в 20:37
  • Обрезает последнюю букву "у". Видео disk.yandex.ru/i/OtA2sHPf2fjMvw Сафари disk.yandex.ru/i/ze0tfEo7LnqKUg Хром disk.yandex.ru/i/pWvf5B4TwtJZIw Я также вчера попросил знакомых проверить с 11-го айфона и SE. По итогу сейчас я выявил, что проблема есть на: SE, XR, 11, 12. Проверяли вот в этой теме или на codepen, куда я просто копировал примеры.
    – Floyat
    21 фев 2022 в 4:53
  • Также попробовал менять значения всех доступных атрибутов для градиента. Задавать различные значения x1, y1, x2, y2. Но эффект такой же. Также попробовал менять значение startOffset у textPath. 0% - disk.yandex.ru/i/TLKRdjGnpPMf9g 20% - disk.yandex.ru/i/imDimoHZc8snfw 50% - disk.yandex.ru/i/kKazvJh97HLgrg
    – Floyat
    21 фев 2022 в 7:20
1

Причем как видно, в градиенте всего 1 цвет

Вот в этом и есть главная причина. Кроме того упущен важный параметр offset

Если необходимо, чтобы было кросс браузерное решение, нужно задавать параметры linearGradient в соответствии со спецификацией, указывая все атрибуты градиента:

<linearGradient id="fill">
               ​<stop offset ="0" stop-color="red"></stop>
                ​<stop offset="100%" stop-color="blue"></stop>
             ​</linearGradient>

Ещё можно отметить, что текст на кривой нужно позиционировать не трансформацией вращения - transform="rotate(-11, 200, 200)", а с помощью - startOffset

color="red" - нужно убрать из шапки SVG. Зачем сразу красить весь блок svg в красный цвет. У вас этим, по идее должен заниматься градиент.
Иначе потом, можно долго искать причину, почему невозможно стилизовать файл из CSS/

<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" >
  ​<defs>
       ​<linearGradient id="fill">
               ​<stop offset ="0" stop-color="red"></stop>
                ​<stop offset="100%" stop-color="blue"></stop>
       ​</linearGradient>
               <path id="text" stroke="black" d="M 200 200 m -168, 0 a 168,168 0 1,
                     0 336,0 a 168,168 0 1,0 -336,0"/>   
  ​</defs>
        ​<text font-size="36" font-style="normal" font-weight="normal" fill="url(#fill)"  textLength="463.5587568803267">
           <textPath href="#text" xlink:href="#text" textLength="463.5587568803267" startOffset="2.5%">
              Пример текста по кругу 
           </textPath>
        </text>
</svg>

Пример анимации текста

Используется изменение значений параметра startOfset

 <animate id="anT" attributeName="startOffset" begin="svg1.click;anT.end+0.5s"
  dur="4s" values="2.5%;100%" fill="freeze" repeatCount="1" /> 

Анимация начнётся после клика

<svg id="svg1" 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" style="border:1px solid" >
  ​<defs>
       ​<linearGradient id="fill">
               ​<stop offset ="0" stop-color="red"></stop>
                ​<stop offset="100%" stop-color="blue"></stop>
       ​</linearGradient>
               <path id="text" stroke="black" d="M 200 200 m -168, 0 a 168,168 0 1,
                     0 336,0 a 168,168 0 1,0 -336,0"/>   
  ​</defs>
        ​<text font-size="36" font-style="normal" font-weight="normal" fill="url(#fill)"  textLength="463.5587568803267">
           <textPath href="#text" xlink:href="#text" textLength="463.5587568803267" startOffset="2.5%">
              Пример текста по кругу 
              <animate id="anT" attributeName="startOffset" begin="svg1.click;anT.end+0.5s" dur="4s" values="2.5%;100%" fill="freeze" repeatCount="1" /> 
           </textPath>
        </text>
</svg>
         
    

3
  • В том то и проблема, что это не кроссбраузерное решение из-за айфонов. Я добавил в первое сообщение ссылку на скрин открытого вашего примера "анимации текста" на Iphone XR в сафари. В хроме аналогично. Чуть позже проверю на 12-м, но думаю будет точно также. Какой-то глобальный баг на айфонах. Как видно, первые и последние буквы некорректно обрезаются. При этом любые браузеры десктопные и андроид устройства отображают корректно, вот что меня больше всего удивило.
    – Floyat
    20 фев 2022 в 14:27
  • Также записал видео как в хроме на айфоне выглядит анимация. disk.yandex.ru/i/mK3R-Oa1Ivtcpg Съедает различные куски букв при прокрутке, как видно. И только на айфонах вот так.
    – Floyat
    20 фев 2022 в 14:40
  • @Floyat Сейчас сделаю второй ответ. Проверю вторую версию - причину бага. К сожалению у меня нет айфона, нет возможности проверить, поэтому прошу вас оперативно ответить. Если не получится, будем дальше искать. 20 фев 2022 в 15:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.