alexdeg
@alexdeg
Новатор

Почему происходит разрыв контура во время анимации на svg?

Добрый день. Почему происходит разрыв и перекос контура? Первый контур не разрывается а второй разрывается и начинает изменятся сам контур — некорректно отображаться

<svg width="544" height="545" viewBox="0 0 414 545" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="line1" d="M467.762 293.552C467.762 392.36 408.438 494.996 327.434 536.146C289.791 555.286 238.806 536.146 193.063 536.146C155.896 536.146 117.062 543.084 85.1365 529.208C-6.82698 488.776 -53.7617 400.973 -53.7617 293.791C-53.7617 148.091 47.9699 31.8177 125.4 5.73999C177.1 -11.7249 241.665 17.2237 292.412 35.8849C319.81 45.9331 353.641 38.995 363.648 44.4977C386.519 56.6992 383.422 83.9731 404.388 111.965C415.586 127.037 425.115 143.784 432.501 161.967C436.79 169.862 441.078 177.757 444.652 185.891C459.661 218.907 467.762 255.272 467.762 293.552Z" stroke="url(#paint0_linear)" stroke-width="0.2835" stroke-miterlimit="10">
    <animate 
        attributeName="d"
        values="M467.762 293.552C467.762 392.36 408.438 494.996 327.434 536.146C289.791 555.286 238.806 536.146 193.063 536.146C155.896 536.146 117.062 543.084 85.1365 529.208C-6.82698 488.776 -53.7617 400.973 -53.7617 293.791C-53.7617 148.091 47.9699 31.8177 125.4 5.73999C177.1 -11.7249 241.665 17.2237 292.412 35.8849C319.81 45.9331 353.641 38.995 363.648 44.4977C386.519 56.6992 383.422 83.9731 404.388 111.965C415.586 127.037 425.115 143.784 432.501 161.967C436.79 169.862 441.078 177.757 444.652 185.891C459.661 218.907 467.762 255.272 467.762 293.552Z;          
        M467.762 290.552C467.762 389.36 408.438 487.996 327.434 529.146C289.791 548.286 236.806 537.146 191.063 537.146C153.896 537.146 114.062 534.084 82.1365 520.208C-9.82697 479.775 -53.7617 397.973 -53.7617 290.791C-53.7617 145.091 47.9699 33.8176 125.4 7.7399C177.1 -9.72498 244.665 9.22365 295.412 27.8848C322.81 37.933 353.641 48.9949 363.648 54.4976C386.519 66.6991 383.422 80.973 404.388 108.965C415.586 124.037 425.115 140.784 432.501 158.967C436.79 166.862 441.078 174.757 444.652 182.891C459.661 215.907 467.762 252.272 467.762 290.552Z;
        M467.762 293.552C467.762 392.36 408.438 489.996 327.434 531.146C281 542.5 238.806 541.146 193.063 541.146C155.896 541.146 117.062 543.084 85.1365 529.208C66.5872 521.053 46.7161 529.441 26 505.19C-22 449 -53.7617 379.354 -53.7617 293.791C-53.7617 148.091 47.9699 31.8177 125.4 5.73999C177.1 -11.7249 241.665 17.2237 292.412 35.8849C319.81 45.9331 353.641 44.995 363.648 50.4977C386.519 62.6992 395.422 83.9731 416.388 111.965C427.586 127.037 425.115 143.784 432.501 161.967C436.79 169.862 441.078 177.757 444.652 185.891C459.661 218.907 467.762 255.272 467.762 293.552Z"
        dur="5s"
        repeatCount="indefinite"/>
</path>
<path id="line2" d="M399.861 123.45C410.343 138.044 418.206 154.312 426.306 171.538C429.88 179.433 434.168 186.61 437.742 194.506C451.322 226.086 458.946 260.776 458.469 297.381C457.516 391.643 400.337 489.255 322.668 528.252C286.693 546.435 237.852 528.731 194.015 528.731C158.039 528.731 120.396 534.951 89.6625 521.314C0.557941 482.317 -45.1855 397.146 -45.1855 293.553C-45.1855 152.877 53.9254 40.4318 130.641 16.0288C181.388 -0.479121 243.809 27.991 293.126 46.8914C319.333 56.9397 351.496 51.437 361.264 57.1789C382.707 70.0981 380.086 96.1758 399.861 123.45Z" stroke="url(#paint0_linear)" stroke-width="0.6201" stroke-miterlimit="10">
    <animate 
        attributeName="d"
        values="M399.861 123.45C410.343 138.044 418.206 154.312 426.306 171.538C429.88 179.433 434.168 186.61 437.742 194.506C451.322 226.086 458.946 260.776 458.469 297.381C457.516 391.643 400.337 489.255 322.668 528.252C286.693 546.435 237.852 528.731 194.015 528.731C158.039 528.731 120.396 534.951 89.6625 521.314C0.557941 482.317 -45.1855 397.146 -45.1855 293.553C-45.1855 152.877 53.9254 40.4318 130.641 16.0288C181.388 -0.479121 243.809 27.991 293.126 46.8914C319.333 56.9397 351.496 51.437 361.264 57.1789C382.707 70.0981 380.086 96.1758 399.861 123.45Z;          
        M399.861 120.449C410.343 135.042 418.206 151.311 426.306 168.537C429.88 176.432 434.168 183.609 437.742 191.504C451.322 223.085 458.946 257.775 458.469 294.38C457.516 388.642 400.337 484.254 322.668 523.251C286.693 541.434 237.852 531.729 194.015 531.729C158.039 531.729 120.396 528.95 89.6625 515.313C0.557938 476.316 -45.1855 394.145 -45.1855 290.552C-45.1855 149.876 53.9254 41.4305 130.641 17.0276C181.388 0.519654 244.809 20.9898 294.126 39.8901C320.333 49.9384 351.496 60.4358 361.264 66.1777C382.707 79.0969 380.086 93.1746 399.861 120.449Z;
        M408 123C419 138 418 154 426 171C429 179 434 186 437 194C451 226 458 260 458 297C457 391 400 484 322 523C286 541 237 531 194 531C158 531 120 534 89 521C70 512 52 513 37 500C-34 437 -45 374 -45 293C-45 152 53 40 130 16C181 -0 243 27 293 46C319 56 351 57 361 63C382 76 389 96 408 123;
        M399.861 123.45C410.343 138.044 418.206 154.312 426.306 171.538C429.88 179.433 434.168 186.61 437.742 194.506C451.322 226.086 458.946 260.776 458.469 297.381C457.516 391.643 400.337 489.255 322.668 528.252C286.693 546.435 237.852 528.731 194.015 528.731C158.039 528.731 120.396 534.951 89.6625 521.314C0.557941 482.317 -45.1855 397.146 -45.1855 293.553C-45.1855 152.877 53.9254 40.4318 130.641 16.0288C181.388 -0.479121 243.809 27.991 293.126 46.8914C319.333 56.9397 351.496 51.437 361.264 57.1789C382.707 70.0981 380.086 96.1758 399.861 123.45Z"
        dur="5s"
        repeatCount="indefinite"/>
</path>

<defs>
<linearGradient id="paint0_linear" x1="207.048" y1="544.933" x2="207.048" y2="-0.00190072" gradientUnits="userSpaceOnUse">
<stop stop-color="#E94859"/>
<stop offset="0.5033"/>
<stop offset="1" stop-color="#00E971"/>
</linearGradient>
</defs>
</svg>
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
monochromer
@monochromer
DIVeloper
Скорее всего, в кривых не совпадает количество точек
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы