Я использую анимацию трассировки SVG с помощью CSS, меняя значения stroke-dasdoffset
с помощью анимации ключевых кадров.
При тестировании моих проектов на устройствах iOS (iPad / iPhone) кажется, что stroke-dasdoffset
/ массив рассчитывается по-другому, до такой степени, что получается совершенно другая анимация.
Я думал, что причиной была моя реализация, но после тестирования следующих Codepens в Chrome / Safari / Firefox, похоже, что это происходит в каждом сценарии, и анимация контура различается на разных устройствах.
<svg version="2.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
class=" ebw-nuwaru-page-title-svg" viewbox="0 0 250 90">
<text text-anchor="start" x="0" y="60"
class="title-text text-stroke" clip-path="url(#text1)">Newfire
</text>
<defs> <clipPath id="text1">
<text text-anchor="start" x="0" y="60" class="title-text">Newfire</text> </clipPath>
</defs>
</svg>
Есть ли ошибки в части CSS, которые искажают работу на устройствах iOS?
Я хотел бы понять, что происходит, и не является ли это ограничением или просто ошибкой программирования.
Свободный перевод вопроса SVG Text Trace rendered differently on iOS devices от участника @TheGoldenD0nut.