Блог

Главная - Вопросы по программированию - Анимация атрибута d определенного пути не работает в firefox

Анимация атрибута d определенного пути не работает в firefox

#firefox #svg #svg-animate #smil

#firefox #svg #svg-анимировать #smil

Вопрос:

Я анимирую d атрибут a path , который обернут вокруг defs тега и связан с помощью
нескольких use тегов. Это отлично работает в Chrome, однако в Firefox анимации нет. Я пробовал это с относительными и абсолютными путями, но безрезультатно.

 <svg viewBox="0 0 300 100">
  <defs>
    <path id="a" d="M0,20 H200 V70 H0z" />
  </defs>
  <use xlink:href="#a" />
  <animate xlink:href="#a" attributeName="d" values="M0,20 H200 V70 H0z; M0,20 H200 V45 H0z" keyTimes="0;1" dur="1s" begin="0s" fill="freeze" />
</svg>

Единственный способ заставить это работать — это повторить path и анимировать их все или есть способ заставить это работать в Firefox?

Комментарии:

1. Я думаю, вам нужно будет повторить пути. На данный момент SMIL изменяет то, на что указывает элемент <use>, не вызывает повторной визуализации <use> .

2. @RobertLongson — Понятно, спасибо! Благодарен за ваш комментарий. 🙂

Ответ №1:

Как прокомментировал @Robert Longson

Я думаю, вам нужно будет повторить пути. На данный момент SMIL изменяет то, на что указывает элемент, не вызывает повторной визуализации.

Поэтому необходимо перенести анимацию непосредственно внутрь <path> тегов

 <svg viewBox="0 0 300 100">
  <defs>
    <path id="a" d="M0,20 H200 V70 H0z" >
      <animate
      attributeName="d"
      values="
            M0,20 H200 V70 H0z;
            M0,20 H200 V45 H0z"
            keyTimes="0;1"
            dur="1s"
            begin="0s"
            fill="freeze" />
    </path>
  </defs>
  <use xlink:href="#a" />
 
</svg>

Запуск анимации после щелчка

 <svg id ="svg1" viewBox="0 0 300 100">
  <defs>
    <path id="a" d="M0,20 H200 V70 H0z" >
      <animate
      attributeName="d"
      values="
            M0,20 H200 V70 H0z;
            M0,20 H200 V45 H0z"
            keyTimes="0;1"
            dur="1s"
            begin="svg1.click"
            fill="freeze" />
    </path>
  </defs>
  <use xlink:href="#a" />
 
</svg>