Question

如何使用d坐标平滑SVG动画？下面的动画有效，但一点都不流畅。有没有办法使此动画平滑，或者不建议这样做？

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
        <path d="M185.31,100.27c-1.26,5.78-4.26,11.78-5.35,18.12-.75,3.2-1.6,6.43-2.56,9.64-8.66,29-26.1,57.27-55.35,58-43,1-112-18-101.68-75.25-.13-3.45-.37-7.06-.37-10.75a80.92,80.92,0,0,1,.73-10.85c-.68-25.15,11.32-49.15,34.32-60.15A101,101,0,0,1,98.34,18.79c3,0,5.91.14,8.8.21,10.91-.95,20.91,1.05,31.38,3.53a65.42,65.42,0,0,1,10.38,3.73c23.28,10.65,39.43,34.6,37.74,62.14A113.13,113.13,0,0,1,185.31,100.27Z" fill="lightblue">

        <animate
        attributeName="d"
        dur="1s"
        from="M185.31,100.27c-1.26,5.78-4.26,11.78-5.35,18.12-.75,3.2-1.6,6.43-2.56,9.64-8.66,29-26.1,57.27-55.35,58-43,1-112-18-101.68-75.25-.13-3.45-.37-7.06-.37-10.75a80.92,80.92,0,0,1,.73-10.85c-.68-25.15,11.32-49.15,34.32-60.15A101,101,0,0,1,98.34,18.79c3,0,5.91.14,8.8.21,10.91-.95,20.91,1.05,31.38,3.53a65.42,65.42,0,0,1,10.38,3.73c23.28,10.65,39.43,34.6,37.74,62.14A113.13,113.13,0,0,1,185.31,100.27Z"
        to="M190.45,100.39c-.45,5.61-2.45,11.61-3,17.78-.6,2.89-1.19,5.81-1.87,8.69-4.78,20.21-15.25,38.34-35.46,48.14a49.63,49.63,0,0,1-8.31,5.74A43.07,43.07,0,0,1,122.05,186c-36.86.86-92.82-13-101.55-53a52,52,0,0,1-1.17-10.56C8,96,16,67,33.9,46.26a59.54,59.54,0,0,1,6-6.73A57.59,57.59,0,0,1,55.05,29,100.93,100.93,0,0,1,98.34,18.79c3,0,5.91.14,8.8.21,10.91-.95,20.91,1.05,31.38,3.53a65.46,65.46,0,0,1,43.06,36.91,87.29,87.29,0,0,1,3.27,9.06C187,77,191,85,190.22,94Q190.47,97.17,190.45,100.39Z"
        repeatCount="indefinite" />
      </svg>

平滑的动画Svg路径D坐标

0 个答案: