Как сделать анимацию рисования path?

Как сделать анимацию рисования всего path, а не только stroke ?
<svg height="400" width="400">
        <path
          id="line"
          stroke-dasharray="2000px"
          stroke-dashoffset="2000px"
          style="fill: transparent; stroke: rgb(0, 0, 0);"
          d="M 15.498 487.577 L 15.498 431.037 L 62.884 396.913 L 94.033 351.883 L 158.319 309.973 L 189.252 236.175 L 280.039 205.522 L 302.034 124.519 L 320.749 62.004 L 384.937 13.925 L 445.421 30.396 L 469.462 54.445 L 469.462 488.53"/>
      </svg>


stroke-dasharray="2000px"
stroke-dashoffset="2000px"

Эти значения я меняю, но рисуется не весь график, а только stroke ?
  • Вопрос задан
  • 75 просмотров
Решения вопроса 1
LenovoId
@LenovoId
I want, women not to get sick
<svg height="200" viewBox="0 0 400 400"  xmlns="http://www.w3.org/2000/svg">
<path d="M 15.498 487.577 L 15.498 431.037 L 62.884 396.913 L 94.033 351.883 L 158.319 309.973 L 189.252 236.175 L 280.039 205.522 L 302.034 124.519 L 320.749 62.004 L 384.937 13.925 L 445.421 30.396 L 469.462 54.445 L 469.462 488.53" stroke="red" stroke-width="4" fill="red" fill-opacity="0" stroke-dasharray="0 1637">
   <animate attributeName="stroke-dasharray"
            dur="2s"
            begin="0s"
            repeatCount="1"
            values="0 1637; 1637 1637"
            id="path"
            fill="freeze"/>
   <animate attributeName="stroke"
            dur="1s"
            begin="path.end"
            repeatCount="1"
            values="red; blue"
            fill="freeze"/>
   <animate attributeName="fill-opacity"
            dur="1s"
            begin="path.end"
            repeatCount="1"
            values="0; 1"
            fill="freeze"/>
  </path>
</svg>


Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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