Анимированные «точки» в «полилинии» (svg), похоже, имеют ограничение/ошибку в 512 на iOS (не на macOS). ⇐ CSS

[Anonymous]

У меня есть SVG с одной ломаной линией внутри.
На настольных компьютерах, Android, macOS анимация работает отлично.
Линия начинает рисоваться слева направо.На iPadOS и iOS анимация снова начинает рисоваться слева направо, но линия выглядит разбитой на 3 сегмента. И все 3 сегмента начинаются одновременно.
Если я выберу 512 точек (или, лучше сказать, 256 пар x,y). Анимация работает правильно.
Когда я использую более 512 точек, я замечаю, что некоторые углы «сломаны».
И есть 3 начальные точки.
Обратите внимание, что длина всегда является положительным числом.
Анимация попутного ветра

Код: Выделить всё

{
keyframes: {
drawLine: {
from: {
stroke-dashoffset": "var(--length)",
},
to: {
"stroke-dashoffset": "0",
},
},
},
animation: {
drawLine: "drawLine 5s linear forwards",
}
}

Имя класса на ломаной линии:

Код: Выделить всё

className="stroke-escape-red stroke-2 fill-none animate-drawLine";

Стиль ломаной линии:

Код: Выделить всё

style={{
"--length": length,
strokeMiterlimit: "10",
strokeLineCap: "round",
strokeLineJoin: "round",
strokeDashoffset: length,
strokeDasharray: length,
}}

Рисунки:
полилиния
сломанный угол
3 отправные точки
Длина извлекается из функции .getTotalLength(), предоставляемой элементом

Код: Выделить всё

.cls-1 {
stroke: red;
fill: none;
stroke-width: 2;
animation: draw 5s linear forwards;
stroke-dasharray: 8263.2890625;
stroke-dashoffset: 8263.2890625;
}
@keyframes draw {
0% {
stroke-dashoffset: 8263.2890625;
}
100% {
stroke-dashoffset:  0;
}
}

Подробнее здесь: https://stackoverflow.com/questions/784 ... on-ios-not