从 Ilustrator 导入 SVG 不会产生干净的线条

Question

我已经从 SVG ilustrator 用 html 制作了动画。 但是制作完成后，笔划在某些部分变得自动。*（我只显示文档本身的一小部分）*谢谢

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=0.5"> <title>Document</title> </head> <body> <style type="text/css"> #sobreU{fill: rgb(182, 236, 222); stroke:#119094; stroke-width:1px; stroke-dashoffset:497.458 ; stroke-dasharray: 497.458; animation: line 2s ease-in-out forwards; } @keyframes line{ 100%{ stroke-dashoffset: 0; } 0%{ } } </style> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="310px" height="200px" viewBox="120 120 1024 549" style="enable-background:new 0 0 1024 549;" xml:space="preserve 3d"> <path id="sobreU" d="M683.1,186c14.1,7.5,21.9,17.4,21.9,28s-7.8,20.5-21.9,28c-14.6,7.7-33.7,11.4-52.9,11.4c-19.1,0-38.3-3.8-52.9-11.5c-14.4-7.6-22.2-17.7-22-28.5l28,0.2c-0.1,6.9,4.7,13.2,13.6,17.9c9.1,4.8,21.1,7.2,33.1,7.2 s24-2.4,33.2-7.2c8.8-4.7,13.7-10.8,13.7-17.4c0-6.6-4.9-12.7-13.7-17.4c-8.8-4.6-20.8-7.2-33.2-7.2c-0.8,0-1.6,0-2.4,0l-0.1-14.9 c1,0,1.9,0,2.8,0C650.3,174.5,668.9,178.5,683.1,186z"/> </path> </body> </html>