4

Пишу SVG + анимация, и столкнулся с такой задачей,- нужно анимировать только одну точку из множества в координатах SVG(чтобы эта точка плавно изменяла свое местоположение с привязкой линии от других точек). Например:

d="M10,10 L20,10 L20,20 z" //чтобы плавно переместилась в
d="M10,10 L123,10 L20,20 z"

Как это можно сделать только кодом? Без сторонних программ типа Иллюстратора

1 ответ 1

5

Анимируется атрибут d патча. Подставляется первое значение и финальное положение, через точку с запятой

values="M10,10 L20,10 L20,20 z;M10,10 L123,10 L20,20z;M10,10 L20,10 L20,20 z"

.container {
width:100%;
height:100%;
}
<div class="container">
<svg id="svg1" viewBox="0 0 200 200" style="border:1px solid red;">
 <path id="pth1" d="M10,10 L20,10 L20,20 z" fill="greenyellow" stroke="gray">
  <animate
  attributeName="d"
  begin="svg1.click"
  dur="2s"
  values="M10,10 L20,10 L20,20 z;M10,10 L123,10 L20,20z"
  fill="freeze"/>
</svg> 
</div>

Туда, обратно

Подставляется в values три значения: стартовое;финальное;стартовое

.container {
width:100%;
height:100%;
}
<div class="container">
<svg id="svg1" viewBox="0 0 200 200" style="border:1px solid red;">
 <path id="pth1" d="M10,10 L20,10 L20,20 z" fill="greenyellow" stroke="gray">
  <animate
  attributeName="d"
  begin="svg1.click"
  dur="4s"
  values="M10,10 L20,10 L20,20 z;M10,10 L123,10 L20,20z;M10,10 L20,10 L20,20 z"
  fill="freeze"/>
</svg> 
</div>

В атрибут values можно подставить сколько угодно промежуточных значений патча,
главное следить, чтобы количество контрольных точек было одинаково у всех промежуточных значений

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.