0
<svg  id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <image id="i0" width="300" height="300" x="150" y="0" xlink:href="logo.png"  />
  <animateTransform xlink:href="#i0" attributeName="transform" type="translate" from="900 300" to="0 620" dur="0.5s" fill="freeze" />


</svg> 
<script type="text/javascript">
   var x = document.body.clientWidth;
   var y = document.body.clientHeight;
 </script>

Есть такая вот анимация перемещения изображения. Как можно передать в параметр анимации from значение переменных x, y?

test
  • 25
  • 2

1 Answers1

1
   var x = document.body.clientWidth;
   var y = document.body.clientHeight;

   document.querySelector('svg animateTransform').setAttribute('from', x + ' ' + y);
Leonid
  • 5,797
  • А если у меня много анимаций? как к ним обратиться по id? или использовать [0]? – test Apr 14 '20 at 13:29
  • Можно по атрибутам document.querySelector('svg animateTransform[attributeName="transform"]') или document.querySelectorAll('svg animateTransform').forEach(anim => {anim.setAttribute('from', x + ' ' + y);}) АААА если надо обратиться к одному из многих, то да document.querySelectorAll('svg animateTransform')[index] – Leonid Apr 14 '20 at 13:32
  • @Leonid не нравится, смешно, больше не буду хвалить ((( – Alexandr_TT Apr 14 '20 at 13:45
  • @Leonid Всюду не успеть. Посмотрите, какой сегодня день, вопросы так и сыплются. Ответил и подробно ответил уже на много вопросов, плюс делаю анимации, которые готовлю для публикации, плюс намечен один интересный перевод на сегодня. Конечно вернусь в топик, когда захочется ответить. – Alexandr_TT Apr 14 '20 at 14:08
  • @Alexandr_TT, так все-таки есть особая магия при обращении с элементами дерева SVG или можно во всех браузерах работать как с обычными DOM элементами. А если вставляется через object? – Leonid Apr 14 '20 at 14:12
  • @Leonid Очень много нюансов в этом вопросе. Напрямую c object через DOM работать затруднительно. Но способы есть, встречал статьи на EnSO, если интересует, поищу и переведу. Вместе с object как правило используется use и svg элементы сразу попадают в shadow DOM/ Тоже можно работать, но нюансов ещё больше Ну а в остальных случаях работа с SVG ничем не отличается от других элементов HTML – Alexandr_TT Apr 14 '20 at 14:19
  • 1
    @Alexandr_TT спасибо за информацию, буду ждать нового вопроса-ответа на эту тему. Будет интересно. Получается, что через createElement можно динамически SVG составить на странице? Мне приходилось динамически составлять SVG на сервере и отправлять клиенту в виде файла, но об этом я не думал совсем. – Leonid Apr 14 '20 at 14:26
  • @Leonid только учтите, что при создании элементов SVG нужно использовать document.createElementNS вот для примера https://ru.stackoverflow.com/a/916533/28748 – Alexandr_TT Apr 14 '20 at 14:36
  • Ужыыыысссс!!! Да, надо изучить вопрос... А новые методы типа append, appendTo, insertAdjacentHTML? – Leonid Apr 14 '20 at 14:44
  • @Leonid насчет последнего не знаю, не встречал, а первые два точно работают – Alexandr_TT Apr 14 '20 at 14:50