我的网站:http://directfree.ru。 我使用kute.js插件和svg变形函数" To"。它在chrome,edge上工作得很好但是我在mozilla firefox上闪烁了。当您尝试慢速滚动页面时,您将看到一些渲染闪烁。我该如何为firefox修复此问题?
这是我用来动画svg变形的代码。 HTML:
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 990">
<defs>
<clipPath id="image-step1">
<path id="step1" fill="none"
d="M1920.000,-0.000 C1919.667,34.330 1919.333,68.670 1919.000,103.000 C1868.320,118.779 1812.150,121.448 1765.000,140.000 C1635.867,190.810 1526.184,274.985 1459.000,388.000 C1434.044,429.980 1420.998,479.764 1402.000,528.000 C1335.008,698.096 1285.229,890.087 1137.000,979.000 C1025.361,1045.965 814.283,1010.050 684.000,986.000 C663.002,984.667 641.998,983.333 621.000,982.000 C590.288,976.928 551.229,984.583 517.000,979.000 C496.335,978.333 475.665,977.667 455.000,977.000 C401.337,967.263 336.823,968.112 291.000,950.000 C190.855,910.416 115.340,831.449 78.000,729.000 C58.951,676.735 53.634,616.789 39.000,559.000 C26.001,510.672 12.999,462.328 0.000,414.000 C0.000,309.677 0.000,205.323 0.000,101.000 C83.239,100.121 161.758,102.817 226.000,122.000 C265.063,133.664 344.357,166.205 396.000,158.000 C445.662,153.334 495.338,148.666 545.000,144.000 C748.982,107.939 1021.426,107.197 1225.000,144.000 C1263.996,148.000 1303.004,152.000 1342.000,156.000 C1366.664,156.667 1391.336,157.333 1416.000,158.000 C1446.330,158.000 1476.670,158.000 1507.000,158.000 C1521.999,157.667 1537.001,157.333 1552.000,157.000 C1607.669,146.424 1655.386,137.746 1688.000,105.000 C1702.658,90.283 1719.837,64.266 1710.000,32.000 C1704.667,21.334 1699.333,10.666 1694.000,-0.000 C1769.326,-0.000 1844.674,-0.000 1920.000,-0.000 Z"/>
</clipPath>
</defs>
<image xlink:href="pathToPic/step1.png'?>" clip-path="url(#image-step1)" width="1920" height="990">
</svg>
JS:
var step1 = 'M1920.000,-0.000 C1919.667,34.330 1919.333,68.670 1919.000,103.000 C1868.320,118.779 1812.150,121.448 1765.000,140.000 C1635.867,190.810 1526.184,260.695 1459.000,388.000 C1436.206,431.192 1389.998,468.764 1371.000,517.000 C1304.008,687.096 1240.229,767.087 1092.000,856.000 C980.361,922.965 880.537,837.228 780.000,901.000 C760.419,928.307 690.998,899.333 670.000,898.000 C639.288,892.928 620.229,897.583 586.000,892.000 C565.335,891.333 504.665,889.667 484.000,889.000 C430.337,879.263 379.823,866.112 334.000,848.000 C233.855,808.416 195.340,781.449 158.000,679.000 C138.951,626.735 64.634,582.789 50.000,525.000 C37.001,476.672 12.999,462.328 0.000,414.000 C0.000,309.677 -81.000,210.323 -81.000,106.000 C2.239,105.121 161.758,102.817 226.000,122.000 C265.063,133.664 344.357,166.205 396.000,158.000 C445.662,153.334 495.338,148.666 545.000,144.000 C748.982,107.939 1021.426,107.197 1225.000,144.000 C1263.996,148.000 1303.004,152.000 1342.000,156.000 C1366.664,156.667 1391.336,157.333 1416.000,158.000 C1446.330,158.000 1476.670,158.000 1507.000,158.000 C1521.999,157.667 1537.002,157.333 1552.000,157.000 C1607.669,146.424 1655.386,137.746 1688.000,105.000 C1702.658,90.283 1719.837,64.266 1710.000,32.000 C1704.667,21.334 1654.333,-30.334 1649.000,-41.000 C1724.326,-41.000 1920.000,-81.093 1920.000,-0.000 Z';
var step2 = 'M986.661,98.969 C1054.746,129.254 1313.318,374.589 1338.000,440.000 C1369.722,524.069 1375.950,632.722 1349.000,778.000 C1328.172,890.274 1366.589,1109.033 1200.243,1193.472 C909.621,1340.994 760.236,1421.251 497.182,1317.471 C338.218,1254.755 434.006,1069.306 273.875,1068.006 C164.439,1067.117 13.457,821.150 97.000,748.000 C285.275,583.147 -223.194,40.613 128.000,83.000 C358.649,110.838 479.930,-126.440 986.661,98.969 Z';
var step3 = 'M1742.000,310.000 C2038.230,421.387 2034.063,464.305 2042.000,497.999 C2076.890,646.129 2014.468,830.953 1953.000,883.000 C1858.198,963.271 1715.850,925.854 1456.000,888.000 C1185.050,848.530 1061.887,882.471 682.000,926.000 C503.766,946.423 -42.779,994.998 169.000,640.000 C314.085,396.797 -145.045,309.726 49.873,66.906 C175.741,-89.894 332.705,70.599 462.000,153.000 C836.467,391.654 1236.573,119.951 1742.000,310.000 Z';
var step4 = 'M-12.000,114.000 C162.489,-44.882 471.676,5.006 628.000,24.000 C806.257,45.659 852.787,0.632 965.000,209.000 C1007.522,287.959 1039.356,454.991 936.000,490.000 C763.582,548.400 775.250,627.551 547.000,525.000 C488.721,498.816 333.904,318.938 198.000,379.000 C74.591,433.541 -107.172,494.548 -90.000,357.999 C-57.132,96.644 -65.618,162.821 -12.000,114.000 Z';
var step5 = 'M755.598,53.571 C850.345,20.413 931.752,4.975 996.581,1.106 C1004.724,0.615 1012.636,0.300 1020.328,0.150 C1028.020,-0.001 1035.493,0.013 1042.762,0.179 C1057.303,0.511 1071.029,1.451 1084.113,2.915 C1110.292,5.845 1133.862,10.854 1156.684,17.387 C1249.155,44.661 1324.126,90.956 1548.348,148.156 C1655.180,175.725 1742.125,208.452 1806.809,244.894 C1871.902,281.441 1914.733,321.702 1942.995,366.747 C1997.469,457.175 2000.770,566.059 2001.738,716.925 C2001.100,738.387 1659.816,744.544 1314.465,744.961 C1292.873,744.989 1271.263,744.996 1249.717,744.983 C1228.172,744.970 1206.691,744.938 1185.357,744.889 C1142.690,744.792 1100.609,744.628 1059.776,744.416 C978.108,743.993 901.426,743.382 835.012,742.732 C702.185,741.433 610.439,739.979 602.079,739.534 C586.534,738.704 444.408,744.157 303.955,737.013 C163.477,729.881 24.746,710.273 15.761,657.033 C10.168,624.279 6.204,593.369 3.755,564.434 C2.530,549.969 1.683,536.003 1.196,522.564 C0.709,509.125 0.581,496.212 0.793,483.846 C1.630,434.323 7.926,393.854 17.974,361.763 C38.212,297.474 72.581,265.804 110.334,247.034 C185.661,210.301 279.726,223.763 333.026,196.617 C422.312,147.679 488.861,121.923 551.252,106.439 C614.052,90.058 672.696,83.948 755.598,53.571 L755.598,53.571 Z';
KUTE.to('#step1', { path: step1 }, { duration: 3000, repeat: 500, yoyo: true,}).start();
KUTE.to('#step2', { path: step2 }, { duration: 3000, repeat: 500, yoyo: true,}).start();
KUTE.to('#step3', { path: step3 }, { duration: 3000, repeat: 500, yoyo: true,}).start();
KUTE.to('#step4', { path: step4 }, { duration: 6000, repeat: 500, yoyo: true,}).start();
KUTE.to('#step5', { path: step5 }, { duration: 3000, repeat: 500, yoyo: true,}).start();