css-анимация для элемента ‹path› в SVG не работает для Mozilla

Я просто хотел анимировать элемент path в SVG в своем HTML. Он отлично работает в Chrome, но не в Mozilla. Я попробовал некоторые префиксы поставщиков, которые мне известны, например -moz-, но они пока не работают. SVG отображается как HTML, но проблема только с анимацией.

.hamburger.svg-cross .svg-navbar path:last-child
{
  d: path("M 16.840205,269.8084 186.17353,267.73425");
  animation: .5s svg-navbaractivel forwards;
}
@keyframes svg-navbaractivel {
  0%
  {
    d: path("M 16.840205,269.8084 186.17353,267.73425");
  }
  50%
  {
    d: path("m 16.840207,204.23424 169.333323,1e-5");
  }
  100%
  {
    d: path("M 16.840205,269.8084 186.17353,140.73425");
  }
}

javascript svg css-animations vendor-prefix
person Rahul Raj    schedule 10.04.2018    source источник
comment
Вам придется использовать SMIL, если вы хотите делать анимацию в Firefox. Обратите внимание, что я думаю, что реализация Chrome нестандартна, поэтому даже если бы Firefox поддерживал CSS-анимацию путей, он не использовал бы синтаксис Chrome.   -  person Robert Longson    schedule 10.04.2018