Анимировать дорожку SVG для разных размеров экрана

Question

Я новичок в SVG. Я пытаюсь оживить прямую линию до кривой. Я следил за несколькими ссылками, но не смог найти подходящий способ сделать это. Ниже мой код:

<svg width="100%" height="960px"> 
    <path id="shape" d="M0 0 C0 0, 0 00, 400 0" stroke="black" fill="transparent" stroke-width="1" vector-effect="non-scaling-stroke"> 
    <animate 
      attributeName="d" 
      dur="500ms" 
      begin="indefinite" 
      repeatCount="1" 
      to = "M0 0 C0 0, 165 50, 400 0" 
      id="test" /> 
    </path> 
</svg> 

Я также использовал:

values="M0 0 C0 0, 0 00, 400 0; M M0 0 C0 0, 165 50, 400 0;" 

в animate тег, но все же это не сработало.

Что является проблемой: я не могу сделать путь изогнутым, анимация происходит один раз, а затем путь становится прямым, и я не уверен, как сделать одну и ту же кривую на разных размерах экрана.

Answer 1

Если вы используете begin = "indefinite", анимация не запустится, кроме как через javascript. Чтобы продемонстрировать вещи, которые я установил begin = "1s"

Если вы хотите, чтобы анимация оставалась в конечной позиции, тогда добавьте fill = "freeze".

Если вы хотите, чтобы он работал с различными размерами экрана, используйте viewBox.

<svg width="100%" height="960px" viewBox="0 0 500 500" preserveAspectRatio="none"> 
 
    <path id="shape" d="M0 0 C0 0, 0 00, 400 0" stroke="black" fill="transparent" stroke-width="1" vector-effect="non-scaling-stroke"> 
 
    <animate 
 
      attributeName="d" 
 
      dur="500ms" 
 
      begin="1s" 
 
      repeatCount="1" 
 
      fill="freeze" 
 
      to = "M0 0 C0 0, 165 50, 400 0" 
 
      id="test" /> 
 
    </path> 
 
</svg>