我有一个 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,
}}
图片：
长度是从元素提供的
.getTotalLength()<!DOCTYPE html>
<html lang="en">
<body style="background-color: black">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
<defs>
<style>
.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;
}
}
</style>
</defs>
<polyline
class="cls-1"
points="0 523.1 112.9 523.1 115.2 509.8 121.3 542.3 124.4 526.1 230.5 526.1 230.5 455.6 261.4 455.6 261.4 434.1 283.1 434.1 283.1 444.8 272.7 444.8 272.7 466.7 261.4 466.7 261.4 510.4 283.1 510.4 283.1 455.3 294.3 455.3 294.3 423 250.8 423 250.8 444.4 239.7 444.4 239.7 423 218.1 423 218.1 413.1 207.5 413.1 207.5 400.5 218.1 400.5 218.1 390.5 185.2 390.5 185.2 379.2 206.7 379.2 206.7 346.5 141.4 346.5 141.4 313.3 163 313.3 163 324.2 152.7 324.2 152.7 335.9 195.8 335.9 195.8 302.6 228.9 302.6 228.9 335.9 240.2 335.9 240.2 346.5 228.3 346.5 228.3 368.5 250.8 368.5 250.8 346.5 261.4 346.5 261.4 357.3 283 357.3 283 303.4 294.6 303.4 294.6 292.2 305.5 292.2 305.5 312.3 315.6 312.3 315.6 324.4 338.2 324.4 338.2 292.2 393.2 292.2 393.2 248.9 414.6 248.9 414.6 292.2 425.5 292.2 425.5 313.3 414.6 313.3 414.6 346.1 403.7 346.1 403.7 357.8 392.4 357.8 392.4 368.5 381.5 368.5 381.5 346.1 360.1 346.1 360.1 368.5 283 368.5 283 413.1 294.3 413.1 293.8 378.4 326.6 378.4 326.6 399.5 316.3 399.5 316.3 390.3 305.5 390.3 305.5 423 327.5 423 327.5 444.8 316.3 444.8 316.3 477.5 337.4 477.5 337.9 410.8 348.5 410.8 348.5 423 381.7 423 381.7 390.5 403.7 390.5 403.7 423 447.7 423 447.7 411.6 490.9 411.6 490.9 433.6 523.7 433.6 523.7 444.9 490.9 444.9 490.9 477.6 467.4 477.6 467.4 466.4 447.3 466.4 447.3 499 479.8 499 479.8 510.6 436.5 510.6 436.5 455.8 425.5 455.8 425.5 467.4 415.1 467.4 415.1 489.9 370.8 489.9 370.8 468 359.8 468 359.8 521.1 283.6 521.1 283.6 533.9 273.2 533.9 273.2 543.7 293.6 543.7 293.6 576.3 304.8 576.3 304.8 543.7 315.5 543.7 315.5 554.9 327.1 554.9 327.1 532.4 349.1 532.4 349.1 564.6 370.8 564.6 370.8 521.1 403.8 521.1 403.8 500.6 415.1 500.6 415.1 509.6 426 509.6 426 554.7 414.9 554.7 414.9 565.2 436.2 565.2 436.2 521.1 656.9 521.1 659.2 507.8 665.3 540.3 668.4 524.1 880.5 524.2 880.5 499.9 891.3 499.9 891.3 521.1 913.3 521.1 913.3 468.3 901.9 468.3 901.9 423.6 967.4 423.6 967.4 390.5 989.1 390.5 989.1 368.6 1001 368.6 1001 346.7 1022.9 346.7 1022.9 412.3 1011.3 412.3 1011.3 423 1044.1 423 1044.1 390.6 1055.7 390.6 1055.7 433.6 1000.4 433.6 1000.4 477.4 979.1 477.4 979.1 465.8 967.4 465.8 967.4 433.6 945.8 433.6 945.8 444.9 935.5 444.9 935.5 455.5 945.8 455.5 945.8 509.6 966.6 509.6 966.6 500 999.8 500 999.8 532.1 1022 532.1 1022 468.6 1033.2 468.6 1033.2 488.6 1065.7 488.6 1065.7 454.9 1077.1 454.9 1077.1 433.6 1099.2 433.6 1099.2 445.5 1087.3 445.5 1087.3 466.7 1077.1 466.7 1077.1 485.5 1108.8 485.5 1108.8 467.4 1131.2 467.4 1131.2 478.6 1142.4 478.6 1142.4 488.6 1153.2 488.6 1153.2 510.6 1186.1 510.6 1186.1 564.9 1164.2 565.4 1164.2 532.6 1088.1 532.1 1088.1 521.4 1054.9 521.4 1054.9 587.1 1000.1 587.1 1000.1 630.7 977.6 630.7 977.6 619.6 968.2 619.6 968.2 587.1 956.6 587.1 956.6 608.6 945.5 608.6 945.5 663.7 934.4 663.7 934.4 707.4 880.5 707.4 880.5 718 1000.4 718 1000.4 805.2 1021.8 805.2 1021.8 838.7 1076.4 838.7 1076.4 816.7 1088.2 816.7 1088.2 860.6 1066.3 860.6 1066.3 892.8 1076.8 892.8 1076.8 882.1 1281.6 882.1 1283.9 868.8 1290 901.3 1293.1 885.1 1491.1 885.1 1491.1 893.1 1514.6 893.1 1514.6 904 1524.6 904 1524.6 882.1 1568.9 882.1 1568.9 838.7 1624 838.7 1624 882.1 1656.5 882.1 1656.5 849.2 1667.4 849.2 1667.4 892.6 1645.2 892.6 1645.2 904 1612.7 904 1612.7 915.3 1689.9 915.3 1689.9 926.5 1678.2 926.5 1678.2 936.4 1666.9 936.4 1666.9 969.7 1808.5 969.7 1808.5 950.4 1798.2 950.4 1798.2 934.5 1821.7 934.5 1821.7 946.2 1920 946.2"
/>
</svg>
</body>
</html>@herrstrietzel 在评论中给出的解决方案。
基本上，iOS 似乎有一个限制，但您可以通过将折线分割为多个路径并延迟后续路径上的动画来解决它