Как анимировать путь svg с помощью jQuery/JavaScript?

Я хотел бы анимировать путь SVG. Я знаю, что этого можно добиться с помощью <animate>, но анимация начинается только после того, как элемент добавлен к некоторому div. Поэтому мне нужно найти другое решение, но я не смог найти никакой помощи в Интернете.

Вот скрипка, чтобы вы могли взглянуть на то, что у меня есть.

Примечание. Теперь я хочу, чтобы путь svg растягивал svg. Итак, сначала это треугольник, но его нужно плавно преобразовать в квадрат, который соответствует svg вокруг него.

Благодарю вас!

// -- click the path -- //

$('path').on('click touch', function() {
  $(this).parents('svg').css({
    height: '100vh',
    width: '100vw'
  });
})
/* -- click the path -- */

* {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden; /* -- just for this example */
}

svg {
  -webkit-transition:
    height 350ms ease-in-out,
    width 350ms ease-in-out;
  transition:
    height 350ms ease-in-out,
    width 350ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- click the path -->

<svg fill="#000" xmlns="http://www.w3.org/2000/svg" version="1.0" height="200" width="200" viewBox="0 0 1024 1024">
  <path d="M0 0 L405 0 L405 635"/>
</svg>


javascript svg animation jquery svg-animate
person Derk Jan Speelman    schedule 16.12.2016    source источник
comment
В вашей скрипке нет ‹animate›. Если вам нужно «анимированное» решение, покажите нам, что у вас уже есть, чтобы мы могли увидеть, в чем оно отличается. Если вы хотите, чтобы треугольник превратился в квадрат с помощью SMIL, вам нужно нарисовать треугольник с дополнительной точкой, например. четвертая вершина совпадает с одной из трех других вершин, вы можете SMIL анимировать все четыре вершины в квадрат.   -  person Robert Longson    schedule 16.12.2016
comment
Я бы хотел, чтобы я мог просто взять путь, сказав $('svg path').attr('d', 'M0 0 L1024 0 L1024 1024 L0 1024'), я не знаю, как использовать тег <animate>, я пытался, но потерпел неудачу. Вы можете ответить на вопрос скрипкой или ручкой, чтобы показать, что вы имеете в виду. (Я также много читал о SMIL в css-tricks, но они просто также используйте <animate>, там такая же история)   -  person Derk Jan Speelman    schedule 16.12.2016
comment
Что вы имеете в виду, но анимация начинается только после того, как элемент добавлен в какой-то div? Почему это проблема для вас? <animate> позволяет изменить время начала анимации.   -  person Paul LeBeau    schedule 17.12.2016

Ответы (1)


arrow_upward
1
arrow_downward

Анимации SMIL (т. е. с использованием <animate>) можно запустить по щелчку.

<svg fill="#000" xmlns="http://www.w3.org/2000/svg" version="1.0" height="200" width="200" viewBox="0 0 1024 1024">
  <path d="M0 0 L405 0 L405 635 L405 635">
    <animate attributeName="d" dur="350ms" to="M0 0 L405 0 L405 635 L0 635"
             begin="click" fill="freeze" />
  </path>
</svg>

person Paul LeBeau    schedule 17.12.2016