Анимация положения XY текста SVG с использованием JS / CSS

Question

Итак, Codepen показывает предпринятую XY-анимацию круга и текста с использованием javascript для установки новой позиции как элементов круга, так и текстовых элементов.

Круг анимируется, как и ожидалось, нотекст просто переходит на новую позицию.

HTML ...

<svg>
  <circle cx="50" cy="50" r="20" fill="#c0c0c0"/>
  <text x="50" y="50">Hello</text>
</svg>
<div>
  <button>Animate</button>
</div>

CSS ...

svg {
  background-color:#e0e0e0;
}
circle,text {
  transition: 1.0s;  
}

Javascript ...

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('circle').setAttribute('cx', 200);
  document.querySelector('text').setAttribute('x', 200);
})

Есть ли способ установить новую позицию XY в тексте через javascript, который вызывает приятную анимацию между текущей позицией и новой позицией (как это происходит для круга)?Чтобы было ясно, я бы предпочел не анимировать это с помощью JavaScript, если это возможно (кроме установки конечной позиции).

Answer 1

Если вы проверите свой пример в Firefox, круг тоже не анимируется.На самом деле координаты не анимируемы (еще?) С CSS.Чтобы анимировать круг и текст с помощью CSS, я бы использовал преобразования:

document.querySelector('button').addEventListener('click', function() {
  document.querySelector('circle').style.transform="translateX(150px)";
  document.querySelector('text').style.transform="translateX(150px)";
})

svg {
  background-color:#e0e0e0;
}
circle,text {
  transform:translateX(0);
  transition: all 1.0s;  
}

<svg>
  <circle cx="50" cy="50" r="20" fill="#c0c0c0"/>
  <text x="50" y="50">Hello</text>
</svg>
<div>
  <button>Animate</button>
</div>

Answer 2

Не делайте этого с помощью CSS: CSS-анимация работает только для CSS (удивительно), тогда как вы пытаетесь анимировать, это свойства SVG.

Сделайте так, чтобы ваш JS вставлял / обновлял AnimateTransform элемент, связанный с вашим прямоугольником, который является встроенным способом SVG для анимации контента.