Safari上的SVG动画以低fps运行
Safari上的SVG动画以低fps运行
提问于 2022-06-17 02:47:22
此SVG在Chrome/Edge和FireFox上运行平稳，而在Safari (Mac)上则不然。如您所见，SVG包含由大数字组成的路径的animateMotion标记。由于片段限制，SVG由58个圆圈组成。原始代码包含200个对象。这是原版：fadi/c3jd71ae/
Safari在计算大数(小数部分)方面有多糟糕？我能做些什么来提高Safari的性能？
<!DOCTYPE html>
<html>
<body>
<svg height="1500" width="4000">
<g transform="translate(100.000100010001,100.000100010001) scale(0.001000000100010001 0.001000000100010001)">
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 0000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 100000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 1000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 110000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 2000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 120000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 3000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 130000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 4000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 140000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 5000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 150000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 6000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 160000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 7000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 170000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 8000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 180000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 9000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 190000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 10000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1100000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 11000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1110000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 12000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1120000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 13000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1130000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 14000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1140000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 15000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1150000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 16000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1160000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 17000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1170000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 18000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1180000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 19000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1190000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 20000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1200000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 21000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1210000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 22000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1220000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 23000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1230000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 24000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1240000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 25000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1250000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 26000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1260000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 27000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1270000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 28000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1280000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 29000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1290000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 30000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1300000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 31000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1310000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 32000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1320000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 33000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1330000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 34000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1340000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 35000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1350000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 36000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1360000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 37000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1370000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 38000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1380000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 39000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1390000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 40000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1400000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 41000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1410000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 42000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1420000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 43000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1430000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 44000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1440000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 45000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1450000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 46000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1460000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 47000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1470000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 48000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1480000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 49000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1490000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 50000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1500000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 51000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1510000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 52000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1520000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 53000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1530000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 54000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1540000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 55000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1550000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 56000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1560000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 57000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1570000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
<circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
<animateMotion
path="M 58000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1580000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
dur="1s" repeatCount="indefinite"></animateMotion>
</circle>
</g>
</svg>
</body>
</html>
更新(如果其他人遇到同样的问题)：I成功地发现了罪魁祸首；它没有使用带有小数点的大数，而是组元素中的标度transform="scale(x,y)"。显然，当x和/或y很小时(对于大数字也可能是这样，我没有检查)，与1，Safari (在我的例子中为v15.3)在计算中挣扎的数字相去甚远。
回答 2
Stack Overflow用户
发布于 2022-06-17 17:10:13
Safari在计算大数(小数部分)方面有多糟糕？我能做些什么来提高Safari的性能？
避免不必要的大数，并在可能的情况下降低浮点精度。
- 在呈现之前，大量的数字可以显著增加解析所有svg数据的时间。
- ..。因为它们增加了文件的总大小(当保存为静态文件或作为内联标记附加到HTML主体时)
- 动画通常受益于整数坐标。
无效命令：
避免像运动路径中的Q命令那样的不完整命令
M 1000 0 Q 100000 100000 110000 200000 Q 200000 300000
应该是(Q需要四个坐标)
M 1000 0 Q 100000 100000 110000 200000
共享/重复样式也可以被<g>组属性(如fill="#00a2e8")缩小。
修正示例:缩小并舍入为整数
(检查控制台以获得优化的代码)
let circleCount = 200;
let svgMarkup =
`<svg viewBox="0 0 1500 400" xmlns="http://www.w3.org/2000/svg">
<g opacity="1" transform="translate(100,100)" fill="#00a2e8" data-z-index="1">`;
for (let i = 0; i < circleCount; i++) {
svgMarkup +=
`<circle id="c${i}" r="9.9"/><animateMotion href="#c${i}" path="M${i} 0Q100 100 ${100 +i*10} 200" dur="1s" repeatCount="indefinite"/>`;
}
svgMarkup += `</g></svg>`;
document.body.insertAdjacentHTML('beforeend', svgMarkup);
console.log(svgMarkup);
静态示例-由js生成(~24 KB)
<svg viewBox="0 0 1500 400" xmlns="http://www.w3.org/2000/svg">
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* <g opacity="1" transform="translate(100,100)" fill="#00a2e8" data-z-index="1"><circle id="c0" r="9.9"/><animateMotion href="#c0" path="M0 0Q100 100 100 200" dur="1s" repeatCount="indefinite"/><circle id="c1" r="9.9"/><animateMotion href="#c1" path="M1 0Q100 100 110 200" dur="1s" repeatCount="indefinite"/><circle id="c2" r="9.9"/><animateMotion href="#c2" path="M2 0Q100 100 120 200" dur="1s" repeatCount="indefinite"/><circle id="c3" r="9.9"/><animateMotion href="#c3" path="M3 0Q100 100 130 200" dur="1s" repeatCount="indefinite"/><circle id="c4" r="9.9"/><animateMotion href="#c4" path="M4 0Q100 100 140 200" dur="1s" repeatCount="indefinite"/><circle id="c5" r="9.9"/><animateMotion href="#c5" path="M5 0Q100 100 150 200" dur="1s" repeatCount="indefinite"/><circle id="c6" r="9.9"/><animateMotion href="#c6" path="M6 0Q100 100 160 200" dur="1s" repeatCount="indefinite"/><circle id="c7" r="9.9"/><animateMotion href="#c7" path="M7 0Q100 100 170 200" dur="1s" repeatCount="indefinite"/><circle id="c8" r="9.9"/><animateMotion href="#c8" path="M8 0Q100 100 180 200" dur="1s" repeatCount="indefinite"/><circle id="c9" r="9.9"/><animateMotion href="#c9" path="M9 0Q100 100 190 200" dur="1s" repeatCount="indefinite"/><circle id="c10" r="9.9"/><animateMotion href="#c10" path="M10 0Q100 100 200 200" dur="1s" repeatCount="indefinite"/><circle id="c11" r="9.9"/><animateMotion href="#c11" path="M11 0Q100 100 210 200" dur="1s" repeatCount="indefinite"/><circle id="c12" r="9.9"/><animateMotion href="#c12" path="M12 0Q100 100 220 200" dur="1s" repeatCount="indefinite"/><circle id="c13" r="9.9"/><animateMotion href="#c13" path="M13 0Q100 100 230 200" dur="1s" repeatCount="indefinite"/><circle id="c14" r="9.9"/><animateMotion href="#c14" path="M14 0Q100 100 240 200" dur="1s" repeatCount="indefinite"/><circle id="c15" r="9.9"/><animateMotion href="#c15" path="M15 0Q100 100 250 200" dur="1s" repeatCount="indefinite"/><circle id="c16" r="9.9"/><animateMotion href="#c16" path="M16 0Q100 100 260 200" dur="1s" repeatCount="indefinite"/><circle id="c17" r="9.9"/><animateMotion href="#c17" path="M17 0Q100 100 270 200" dur="1s" repeatCount="indefinite"/><circle id="c18" r="9.9"/><animateMotion href="#c18" path="M18 0Q100 100 280 200" dur="1s" repeatCount="indefinite"/><circle id="c19" r="9.9"/><animateMotion href="#c19" path="M19 0Q100 100 290 200" dur="1s" repeatCount="indefinite"/><circle id="c20" r="9.9"/><animateMotion href="#c20" path="M20 0Q100 100 300 200" dur="1s" repeatCount="indefinite"/><circle id="c21" r="9.9"/><animateMotion href="#c21" path="M21 0Q100 100 310 200" dur="1s" repeatCount="indefinite"/><circle id="c22" r="9.9"/><animateMotion href="#c22" path="M22 0Q100 100 320 200" dur="1s" repeatCount="indefinite"/><circle id="c23" r="9.9"/><animateMotion href="#c23" path="M23 0Q100 100 330 200" dur="1s" repeatCount="indefinite"/><circle id="c24" r="9.9"/><animateMotion href="#c24" path="M24 0Q100 100 340 200" dur="1s" repeatCount="indefinite"/><circle id="c25" r="9.9"/><animateMotion href="#c25" path="M25 0Q100 100 350 200" dur="1s" repeatCount="indefinite"/><circle id="c26" r="9.9"/><animateMotion href="#c26" path="M26 0Q100 100 360 200" dur="1s" repeatCount="indefinite"/><circle id="c27" r="9.9"/><animateMotion href="#c27" path="M27 0Q100 100 370 200" dur="1s" repeatCount="indefinite"/><circle id="c28" r="9.9"/><animateMotion href="#c28" path="M28 0Q100 100 380 200" dur="1s" repeatCount="indefinite"/><circle id="c29" r="9.9"/><animateMotion href="#c29" path="M29 0Q100 100 390 200" dur="1s" repeatCount="indefinite"/><circle id="c30" r="9.9"/><animateMotion href="#c30" path="M30 0Q100 100 400 200" dur="1s" repeatCount="indefinite"/><circle id="c31" r="9.9"/><animateMotion href="#c31" path="M31 0Q100 100 410 200" dur="1s" repeatCount="indefinite"/><circle id="c32" r="9.9"/><animateMotion href="#c32" path="M32 0Q100 100 420 200" dur="1s" repeatCount="indefinite"/><circle id="c33" r="9.9"/><animateMotion href="#c33" path="M33 0Q100 100 430 200" dur="1s" repeatCount="indefinite"/><circle id="c34" r="9.9"/><animateMotion href="#c34" path="M34 0Q100 100 440 200" dur="1s" repeatCount="indefinite"/><circle id="c35" r="9.9"/><animateMotion href="#c35" path="M35 0Q100 100 450 200" dur="1s" repeatCount="indefinite"/><circle id="c36" r="9.9"/><animateMotion href="#c36" path="M36 0Q100 100 460 200" dur="1s" repeatCount="indefinite"/><circle id="c37" r="9.9"/><animateMotion href="#c37" path="M37 0Q100 100 470 200" dur="1s" repeatCount="indefinite"/><circle id="c38" r="9.9"/><animateMotion href="#c38" path="M38 0Q100 100 480 200" dur="1s" repeatCount="indefinite"/><circle id="c39" r="9.9"/><animateMotion href="#c39" path="M39 0Q100 100 490 200" dur="1s" repeatCount="indefinite"/><circle id="c40" r="9.9"/><animateMotion href="#c40" path="M40 0Q100 100 500 200" dur="1s" repeatCount="indefinite"/><circle id="c41" r="9.9"/><animateMotion href="#c41" path="M41 0Q100 100 510 200" dur="1s" repeatCount="indefinite"/><circle id="c42" r="9.9"/><animateMotion href="#c42" path="M42 0Q100 100 520 200" dur="1s" repeatCount="indefinite"/><circle id="c43" r="9.9"/><animateMotion href="#c43" path="M43 0Q100 100 530 200" dur="1s" repeatCount="indefinite"/><circle id="c44" r="9.9"/><animateMotion href="#c44" path="M44 0Q100 100 540 200" dur="1s" repeatCount="indefinite"/><circle id="c45" r="9.9"/><animateMotion href="#c45" path="M45 0Q100 100 550 200" dur="1s" repeatCount="indefinite"/><circle id="c46" r="9.9"/><animateMotion href="#c46" path="M46 0Q100 100 560 200" dur="1s" repeatCount="indefinite"/><circle id="c47" r="9.9"/><animateMotion href="#c47" path="M47 0Q100 100 570 200" dur="1s" repeatCount="indefinite"/><circle id="c48" r="9.9"/><animateMotion href="#c48" path="M48 0Q100 100 580 200" dur="1s" repeatCount="indefinite"/><circle id="c49" r="9.9"/><animateMotion href="#c49" path="M49 0Q100 100 590 200" dur="1s" repeatCount="indefinite"/><circle id="c50" r="9.9"/><animateMotion href="#c50" path="M50 0Q100 100 600 200" dur="1s" repeatCount="indefinite"/><circle id="c51" r="9.9"/><animateMotion href="#c51" path="M51 0Q100 100 610 200" dur="1s" repeatCount="indefinite"/><circle id="c52" r="9.9"/><animateMotion href="#c52" path="M52 0Q100 100 620 200" dur="1s" repeatCount="indefinite"/><circle id="c53" r="9.9"/><animateMotion href="#c53" path="M53 0Q100 100 630 200" dur="1s" repeatCount="indefinite"/><circle id="c54" r="9.9"/><animateMotion href="#c54" path="M54 0Q100 100 640 200" dur="1s" repeatCount="indefinite"/><circle id="c55" r="9.9"/><animateMotion href="#c55" path="M55 0Q100 100 650 200" dur="1s" repeatCount="indefinite"/><circle id="c56" r="9.9"/><animateMotion href="#c56" path="M56 0Q100 100 660 200" dur="1s" repeatCount="indefinite"/><circle id="c57" r="9.9"/><animateMotion href="#c57" path="M57 0Q100 100 670 200" dur="1s" repeatCount="indefinite"/><circle id="c58" r="9.9"/><animateMotion href="#c58" path="M58 0Q100 100 680 200" dur="1s" repeatCount="indefinite"/><circle id="c59" r="9.9"/><animateMotion href="#c59" path="M59 0Q100 100 690 200" dur="1s" repeatCount="indefinite"/><circle id="c60" r="9.9"/><animateMotion href="#c60" path="M60 0Q100 100 700 200" dur="1s" repeatCount="indefinite"/><circle id="c61" r="9.9"/><animateMotion href="#c61" path="M61 0Q100 100 710 200" dur="1s" repeatCount="indefinite"/><circle id="c62" r="9.9"/><animateMotion href="#c62" path="M62 0Q100 100 720 200" dur="1s" repeatCount="indefinite"/><circle id="c63" r="9.9"/><animateMotion href="#c63" path="M63 0Q100 100 730 200" dur="1s" repeatCount="indefinite"/><circle id="c64" r="9.9"/><animateMotion href="#c64" path="M64 0Q100 100 740 200" dur="1s" repeatCount="indefinite"/><circle id="c65" r="9.9"/><animateMotion href="#c65" path="M65 0Q100 100 750 200" dur="1s" repeatCount="indefinite"/><circle id="c66" r="9.9"/><animateMotion href="#c66" path="M66 0Q100 100 760 200" dur="1s" repeatCount="indefinite"/><circle id="c67" r="9.9"/><animateMotion href="#c67" path="M67 0Q100 100 770 200" dur="1s" repeatCount="indefinite"/><circle id="c68" r="9.9"/><animateMotion href="#c68" path="M68 0Q100 100 780 200" dur="1s" repeatCount="indefinite"/><circle id="c69" r="9.9"/><animateMotion href="#c69" path="M69 0Q100 100 790 200" dur="1s" repeatCount="indefinite"/><circle id="c70" r="9.9"/><animateMotion href="#c70" path="M70 0Q100 100 800 200" dur="1s" repeatCount="indefinite"/><circle id="c71" r="9.9"/><animateMotion href="#c71" path="M71 0Q100 100 810 200" dur="1s" repeatCount="indefinite"/><circle id="c72" r="9.9"/><animateMotion href="#c72" path="M72 0Q100 100 820 200" dur="1s" repeatCount="indefinite"/><circle id="c73" r="9.9"/><animateMotion href="#c73" path="M73 0Q100 100 830 200" dur="1s" repeatCount="indefinite"/><circle id="c74" r="9.9"/><animateMotion href="#c74" path="M74 0Q100 100 840 200" dur="1s" repeatCount="indefinite"/><circle id="c75" r="9.9"/><animateMotion href="#c75" path="M75 0Q100 100 850 200" dur="1s" repeatCount="indefinite"/><circle id="c76" r="9.9"/><animateMotion href="#c76" path="M76 0Q100 100 860 200" dur="1s" repeatCount="indefinite"/><circle id="c77" r="9.9"/><animateMotion href="#c77" path="M77 0Q100 100 870 200" dur="1s" repeatCount="indefinite"/><circle id="c78" r="9.9"/><animateMotion href="#c78" path="M78 0Q100 100 880 200" dur="1s" repeatCount="indefinite"/><circle id="c79" r="9.9"/><animateMotion href="#c79" path="M79 0Q100 100 890 200" dur="1s" repeatCount="indefinite"/><circle id="c80" r="9.9"/><animateMotion href="#c80" path="M80 0Q100 100 900 200" dur="1s" repeatCount="indefinite"/><circle id="c81" r="9.9"/><animateMotion href="#c81" path="M81 0Q100 100 910 200" dur="1s" repeatCount="indefinite"/><circle id="c82" r="9.9"/><animateMotion href="#c82" path="M82 0Q100 100 920 200" dur="1s" repeatCount="indefinite"/><circle id="c83" r="9.9"/><animateMotion href="#c83" path="M83 0Q100 100 930 200" dur="1s" repeatCount="indefinite"/><circle id="c84" r="9.9"/><animateMotion href="#c84" path="M84 0Q100 100 940 200" dur="1s" repeatCount="indefinite"/><circle id="c85" r="9.9"/><animateMotion href="#c85" path="M85 0Q100 100 950 200" dur="1s" repeatCount="indefinite"/><circle id="c86" r="9.9"/><animateMotion href="#c86" path="M86 0Q100 100 960 200" dur="1s" repeatCount="indefinite"/><circle id="c87" r="9.9"/><animateMotion href="#c87" path="M87 0Q100 100 970 200" dur="1s" repeatCount="indefinite"/><circle id="c88" r="9.9"/><animateMotion href="#c88" path="M88 0Q100 100 980 200" dur="1s" repeatCount="indefinite"/><circle id="c89" r="9.9"/><animateMotion href="#c89" path="M89 0Q100 100 990 200" dur="1s" repeatCount="indefinite"/><circle id="c90" r="9.9"/><animateMotion href="#c90" path="M90 0Q100 100 1000 200" dur="1s" repeatCount="indefinite"/><circle id="c91" r="9.9"/><animateMotion href="#c91" path="M91 0Q100 100 1010 200" dur="1s" repeatCount="indefinite"/><circle id="c92" r="9.9"/><animateMotion href="#c92" path="M92 0Q100 100 1020 200" dur="1s" repeatCount="indefinite"/><circle id="c93" r="9.9"/><animateMotion href="#c93" path="M93 0Q100 100 1030 200" dur="1s" repeatCount="indefinite"/><circle id="c94" r="9.9"/><animateMotion href="#c94" path="M94 0Q100 100 1040 200" dur="1s" repeatCount="indefinite"/><circle id="c95" r="9.9"/><animateMotion href="#c95" path="M95 0Q100 100 1050 200" dur="1s" repeatCount="indefinite"/><circle id="c96" r="9.9"/><animateMotion href="#c96" path="M96 0Q100 100 1060 200" dur="1s" repeatCount="indefinite"/><circle id="c97" r="9.9"/><animateMotion href="#c97" path="M97 0Q100 100 1070 200" dur="1s" repeatCount="indefinite"/><circle id="c98" r="9.9"/><animateMotion href="#c98" path="M98 0Q100 100 1080 200" dur="1s" repeatCount="indefinite"/><circle id="c99" r="9.9"/><animateMotion href="#c99" path="M99 0Q100 100 1090 200" dur="1s" repeatCount="indefinite"/><circle id="c100" r="9.9"/><animateMotion href="#c100" path="M100 0Q100 100 1100 200" dur="1s" repeatCount="indefinite"/><circle id="c101" r="9.9"/><animateMotion href="#c101" path="M101 0Q100 100 1110 200" dur="1s" repeatCount="indefinite"/><circle id="c102" r="9.9"/><animateMotion href="#c102" path="M102 0Q100 100 1120 200" dur="1s" repeatCount="indefinite"/><circle id="c103" r="9.9"/><animateMotion href="#c103" path="M103 0Q100 100 1130 200" dur="1s" repeatCount="indefinite"/><circle id="c104" r="9.9"/><animateMotion href="#c104" path="M104 0Q100 100 1140 200" dur="1s" repeatCount="indefinite"/><circle id="c105" r="9.9"/><animateMotion href="#c105" path="M105 0Q100 100 1150 200" dur="1s" repeatCount="indefinite"/><circle id="c106" r="9.9"/><animateMotion href="#c106" path="M106 0Q100 100 1160 200" dur="1s" repeatCount="indefinite"/><circle id="c107" r="9.9"/><animateMotion href="#c107" path="M107 0Q100 100 1170 200" dur="1s" repeatCount="indefinite"/><circle id="c108" r="9.9"/><animateMotion href="#c108" path="M108 0Q100 100 1180 200" dur="1s" repeatCount="indefinite"/><circle id="c109" r="9.9"/><animateMotion href="#c109" path="M109 0Q100 100 1190 200" dur="1s" repeatCount="indefinite"/><circle id="c110" r="9.9"/><animateMotion href="#c110" path="M110 0Q100 100 1200 200" dur="1s" repeatCount="indefinite"/><circle id="c111" r="9.9"/><animateMotion href="#c111" path="M111 0Q100 100 1210 200" dur="1s" repeatCount="indefinite"/><circle id="c112" r="9.9"/><animateMotion href="#c112" path="M112 0Q100 100 1220 200" dur="1s" repeatCount="indefinite"/><circle id="c113" r="9.9"/><animateMotion href="#c113" path="M113 0Q100 100 1230 200" dur="1s" repeatCount="indefinite"/><circle id="c114" r="9.9"/><animateMotion href="#c114" path="M114 0Q100 100 1240 200" dur="1s" repeatCount="indefinite"/><circle id="c115" r="9.9"/><animateMotion href="#c115" path="M115 0Q100 100 1250 200" dur="1s" repeatCount="indefinite"/><circle id="c116" r="9.9"/><animateMotion href="#c116" path="M116 0Q100 100 1260 200" dur="1s" repeatCount="indefinite"/><circle id="c117" r="9.9"/><animateMotion href="#c117" path="M117 0Q100 100 1270 200" dur="1s" repeatCount="indefinite"/><circle id="c118" r="9.9"/><animateMotion href="#c118" path="M118 0Q100 100 1280 200" dur="1s" repeatCount="indefinite"/><circle id="c119" r="9.9"/><animateMotion href="#c119" path="M119 0Q100 100 1290 200" dur="1s" repeatCount="indefinite"/><circle id="c120" r="9.9"/><animateMotion href="#c120" path="M120 0Q100 100 1300 200" dur="1s" repeatCount="indefinite"/><circle id="c121" r="9.9"/><animateMotion href="#c121" path="M121 0Q100 100 1310 200" dur="1s" repeatCount="indefinite"/><circle id="c122" r="9.9"/><animateMotion href="#c122" path="M122 0Q100 100 1320 200" dur="1s" repeatCount="indefinite"/><circle id="c123" r="9.9"/><animateMotion href="#c123" path="M123 0Q100 100 1330 200" dur="1s" repeatCount="indefinite"/><circle id="c124" r="9.9"/><animateMotion href="#c124" path="M124 0Q100 100 1340 200" dur="1s" repeatCount="indefinite"/><circle id="c125" r="9.9"/><animateMotion href="#c125" path="M125 0Q100 100 1350 200" dur="1s" repeatCount="indefinite"/><circle id="c126" r="9.9"/><animateMotion href="#c126" path="M126 0Q100 100 1360 200" dur="1s" repeatCount="indefinite"/><circle id="c127" r="9.9"/><animateMotion href="#c127" path="M127 0Q100 100 1370 200" dur="1s" repeatCount="indefinite"/><circle id="c128" r="9.9"/><animateMotion href="#c128" path="M128 0Q100 100 1380 200" dur="1s" repeatCount="indefinite"/><circle id="c129" r="9.9"/><animateMotion href="#c129" path="M129 0Q100 100 1390 200" dur="1s" repeatCount="indefinite"/><circle id="c130" r="9.9"/><animateMotion href="#c130" path="M130 0Q100 100 1400 200" dur="1s" repeatCount="indefinite"/><circle id="c131" r="9.9"/><animateMotion href="#c131" path="M131 0Q100 100 1410 200" dur="1s" repeatCount="indefinite"/><circle id="c132" r="9.9"/><animateMotion href="#c132" path="M132 0Q100 100 1420 200" dur="1s" repeatCount="indefinite"/><circle id="c133" r="9.9"/><animateMotion href="#c133" path="M133 0Q100 100 1430 200" dur="1s" repeatCount="indefinite"/><circle id="c134" r="9.9"/><animateMotion href="#c134" path="M134 0Q100 100 1440 200" dur="1s" repeatCount="indefinite"/><circle id="c135" r="9.9"/><animateMotion href="#c135" path="M135 0Q100 100 1450 200" dur="1s" repeatCount="indefinite"/><circle id="c136" r="9.9"/><animateMotion href="#c136" path="M136 0Q100 100 1460 200" dur="1s" repeatCount="indefinite"/><circle id="c137" r="9.9"/><animateMotion href="#c137" path="M137 0Q100 100 1470 200" dur="1s" repeatCount="indefinite"/><circle id="c138" r="9.9"/><animateMotion href="#c138" path="M138 0Q100 100 1480 200" dur="1s" repeatCount="indefinite"/><circle id="c139" r="9.9"/><animateMotion href="#c139" path="M139 0Q100 100 1490 200" dur="1s" repeatCount="indefinite"/><circle id="c140" r="9.9"/><animateMotion href="#c140" path="M140 0Q100 100 1500 200" dur="1s" repeatCount="indefinite"/><circle id="c141" r="9.9"/><animateMotion href="#c141" path="M141 0Q100 100 1510 200" dur="1s" repeatCount="indefinite"/><circle id="c142" r="9.9"/><animateMotion href="#c142" path="M142 0Q100 100 1520 200" dur="1s" repeatCount="indefinite"/><circle id="c143" r="9.9"/><animateMotion href="#c143" path="M143 0Q100 100 1530 200" dur="1s" repeatCount="indefinite"/><circle id="c144" r="9.9"/><animateMotion href="#c144" path="M144 0Q100 100 1540 200" dur="1s" repeatCount="indefinite"/><circle id="c145" r="9.9"/><animateMotion href="#c145" path="M145 0Q100 100 1550 200" dur="1s" repeatCount="indefinite"/><circle id="c146" r="9.9"/><animateMotion href="#c146" path="M146 0Q100 100 1560 200" dur="1s" repeatCount="indefinite"/><circle id="c147" r="9.9"/><animateMotion href="#c147" path="M147 0Q100 100 1570 200" dur="1s" repeatCount="indefinite"/><circle id="c148" r="9.9"/><animateMotion href="#c148" path="M148 0Q100 100 1580 200" dur="1s" repeatCount="indefinite"/><circle id="c149" r="9.9"/><animateMotion href="#c149" path="M149 0Q100 100 1590 200" dur="1s" repeatCount="indefinite"/><circle id="c150" r="9.9"/><animateMotion href="#c150" path="M150 0Q100 100 1600 200" dur="1s" repeatCount="indefinite"/><circle id="c151" r="9.9"/><animateMotion href="#c151" path="M151 0Q100 100 1610 200" dur="1s" repeatCount="indefinite"/><circle id="c152" r="9.9"/><animateMotion href="#c152" path="M152 0Q100 100 1620 200" dur="1s" repeatCount="indefinite"/><circle id="c153" r="9.9"/><animateMotion href="#c153" path="M153 0Q100 100 1630 200" dur="1s" repeatCount="indefinite"/><circle id="c154" r="9.9"/><animateMotion href="#c154" path="M154 0Q100 100 1640 200" dur="1s" repeatCount="indefinite"/><circle id="c155" r="9.9"/><animateMotion href="#c155" path="M155 0Q100 100 1650 200" dur="1s" repeatCount="indefinite"/><circle id="c156" r="9.9"/><animateMotion href="#c156" path="M156 0Q100 100 1660 200" dur="1s" repeatCount="indefinite"/><circle id="c157" r="9.9"/><animateMotion href="#c157" path="M157 0Q100 100 1670 200" dur="1s" repeatCount="indefinite"/><circle id="c158" r="9.9"/><animateMotion href="#c158" path="M158 0Q100 100 1680 200" dur="1s" repeatCount="indefinite"/><circle id="c159" r="9.9"/><animateMotion href="#c159" path="M159 0Q100 100 1690 200" dur="1s" repeatCount="indefinite"/><circle id="c160" r="9.9"/><animateMotion href="#c160" path="M160 0Q100 100 1700 200" dur="1s" repeatCount="indefinite"/><circle id="c161" r="9.9"/><animateMotion href="#c161" path="M161 0Q100 100 1710 200" dur="1s" repeatCount="indefinite"/><circle id="c162" r="9.9"/><animateMotion href="#c162" path="M162 0Q100 100 1720 200" dur="1s" repeatCount="indefinite"/><circle id="c163" r="9.9"/><animateMotion href="#c163" path="M163 0Q100 100 1730 200" dur="1s" repeatCount="indefinite"/><circle id="c164" r="9.9"/><animateMotion href="#c164" path="M164 0Q100 100 1740 200" dur="1s" repeatCount="indefinite"/><circle id="c165" r="9.9"/><animateMotion href="#c165" path="M165 0Q100 100 1750 200" dur="1s" repeatCount="indefinite"/><circle id="c166" r="9.9"/><animateMotion href="#c166" path="M166 0Q100 100 1760 200" dur="1s" repeatCount="indefinite"/><circle id="c167" r="9.9"/><animateMotion href="#c167" path="M167 0Q100 100 1770 200" dur="1s" repeatCount="indefinite"/><circle id="c168" r="9.9"/><animateMotion href="#c168" path="M168 0Q100 100 1780 200" dur="1s" repeatCount="indefinite"/><circle id="c169" r="9.9"/><animateMotion href="#c169" path="M169 0Q100 100 1790 200" dur="1s" repeatCount="indefinite"/><circle id="c170" r="9.9"/><animateMotion href="#c170" path="M170 0Q100 100 1800 200" dur="1s" repeatCount="indefinite"/><circle id="c171" r="9.9"/><animateMotion href="#c171" path="M171 0Q100 100 1810 200" dur="1s" repeatCount="indefinite"/><circle id="c172" r="9.9"/><animateMotion href="#c172" path="M172 0Q100 100 1820 200" dur="1s" repeatCount="indefinite"/><circle id="c173" r="9.9"/><animateMotion href="#c173" path="M173 0Q100 100 1830 200" dur="1s" repeatCount="indefinite"/><circle id="c174" r="9.9"/><animateMotion href="#c174" path="M174 0Q100 100 1840 200" dur="1s" repeatCount="indefinite"/><circle id="c175" r="9.9"/><animateMotion href="#c175" path="M175 0Q100 100 1850 200" dur="1s" repeatCount="indefinite"/><circle id="c176" r="9.9"/><animateMotion href="#c176" path="M176 0Q100 100 1860 200" dur="1s" repeatCount="indefinite"/><circle id="c177" r="9.9"/><animateMotion href="#c177" path="M177 0Q100 100 1870 200" dur="1s" repeatCount="indefinite"/><circle id="c178" r="9.9"/><animateMotion href="#c178" path="M178 0Q100 100 1880 200" dur="1s" repeatCount="indefinite"/><circle id="c179" r="9.9"/><animateMotion href="#c179" path="M179 0Q100 100 1890 200" dur="1s" repeatCount="indefinite"/><circle id="c180" r="9.9"/><animateMotion href="#c180" path="M180 0Q100 100 1900 200" dur="1s" repeatCount="indefinite"/><circle id="c181" r="9.9"/><animateMotion href="#c181" path="M181 0Q100 100 1910 200" dur="1s" repeatCount="indefinite"/><circle id="c182" r="9.9"/><animateMotion href="#c182" path="M182 0Q100 100 1920 200" dur="1s" repeatCount="indefinite"/><circle id="c183" r="9.9"/><animateMotion href="#c183" path="M183 0Q100 100 1930 200" dur="1s" repeatCount="indefinite"/><circle id="c184" r="9.9"/><animateMotion href="#c184" path="M184 0Q100 100 1940 200" dur="1s" repeatCount="indefinite"/><circle id="c185" r="9.9"/><animateMotion href="#c185" path="M185 0Q100 100 1950 200" dur="1s" repeatCount="indefinite"/><circle id="c186" r="9.9"/><animateMotion href="#c186" path="M186 0Q100 100 1960 200" dur="1s" repeatCount="indefinite"/><circle id="c187" r="9.9"/><animateMotion href="#c187" path="M187 0Q100 100 1970 200" dur="1s" repeatCount="indefinite"/><circle id="c188" r="9.9"/><animateMotion href="#c188" path="M188 0Q100 100 1980 200" dur="1s" repeatCount="indefinite"/><circle id="c189" r="9.9"/><animateMotion href="#c189" path="M189 0Q100 100 1990 200" dur="1s" repeatCount="indefinite"/><circle id="c190" r="9.9"/><animateMotion href="#c190" path="M190 0Q100 100 2000 200" dur="1s" repeatCount="indefinite"/><circle id="c191" r="9.9"/><animateMotion href="#c191" path="M191 0Q100 100 2010 200" dur="1s" repeatCount="indefinite"/><circle id="c192" r="9.9"/><animateMotion href="#c192" path="M192 0Q100 100 2020 200" dur="1s" repeatCount="indefinite"/><circle id="c193" r="9.9"/><animateMotion href="#c193" path="M193 0Q100 100 2030 200" dur="1s" repeatCount="indefinite"/><circle id="c194" r="9.9"/><animateMotion href="#c194" path="M194 0Q100 100 2040 200" dur="1s" repeatCount="indefinite"/><circle id="c195" r="9.9"/><animateMotion href="#c195" path="M195 0Q100 100 2050 200" dur="1s" repeatCount="indefinite"/><circle id="c196" r="9.9"/><animateMotion href="#c196" path="M196 0Q100 100 2060 200" dur="1s" repeatCount="indefinite"/><circle id="c197" r="9.9"/><animateMotion href="#c197" path="M197 0Q100 100 2070 200" dur="1s" repeatCount="indefinite"/><circle id="c198" r="9.9"/><animateMotion href="#c198" path="M198 0Q100 100 2080 200" dur="1s" repeatCount="indefinite"/><circle id="c199" r="9.9"/><animateMotion href="#c199" path="M199 0Q100 100 2090 200" dur="1s" repeatCount="indefinite"/></g></svg>
*/
另见：Taylor Hunt关于Css技巧的文章:改进SVG运行时性能
一些浏览器也可能会出现非常大的数字问题，如下所述：
Stack Overflow用户
发布于 2022-06-18 20:44:33
正如我在上面的更新中所写的，这个问题是由scale()引起的。幸运的是，我控制了它(我没有控制路径本身)，所以我设法将缩放值设置得更接近1(在我的例子中是0.2)，它就像一种魅力！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72653832
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号