svg change path не работает в Firefox и Safari

Question

У меня есть SVG на моей веб-странице, и я хочу анимировать его по клику, поэтому я написал следующий код, но он работает только в Google Chrome, а не в Firefox или Safari.

Мой код:

$('#menu').click(function() { 
 

 
     if ($(this).find('path:nth-child(1)').attr('d') === 'M12.972944,50.936147C12.972944,50.936147,51.027056,12.882035,51.027056,12.882035') { 
 
      $(this).find('path:nth-child(1)').attr('d','M5.0916789,18.818994C5.0916789,18.818994,52.908321,18.818994,52.908321,18.818994'); 
 
      $(this).find('path:nth-child(2)').show('fast'); 
 
      $(this).find('path:nth-child(3)').attr('d','M5.0916788,44.95698C5.0916788,44.95698,52.908321,44.95698,52.908321,44.95698'); 
 
     } 
 
     else { 
 
      $(this).find('path:nth-child(1)').attr('d','M12.972944,50.936147C12.972944,50.936147,51.027056,12.882035,51.027056,12.882035'); 
 
      $(this).find('path:nth-child(2)').hide('fast'); 
 
      $(this).find('path:nth-child(3)').attr('d','M12.972944,12.882035000000002C12.972944,12.882035000000002,51.027056,50.936147,51.027056,50.936147'); 
 
     } 
 

 
    });

*{ 
 

 
transition: all 0.5s ease 0.1s; 
 

 
}   
 
#menu{ 
 
      padding: 0.78rem 1.22rem; 
 
      cursor: pointer; 
 
      display: inline-block; 
 
      float: right; 
 
      path{ 
 
       transition:all 300ms ease-in-out; 
 
       -webkit-transition:all 300ms ease-in-out; 
 
       -moz-transition:all 300ms ease-in-out; 
 
       -ms-transition:all 300ms ease-in-out; 
 
       -o-transition:all 300ms ease-in-out; 
 
      } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg width="23" height="23" viewBox="0 0 64 64" id="menu" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
         <g> 
 
        \t \t <path fill="none" stroke="#2A3033" stroke-width="6" stroke-linejoin="bevel" d="M5.0916789,18.818994C5.0916789,18.818994,52.908321,18.818994,52.908321,18.818994"></path> 
 
        \t \t <path fill="none" stroke="#2A3033" stroke-width="6" stroke-linejoin="bevel" d="m 5.1969746,31.909063 47.8166424,0" transform="matrix(1,0,0,1,0,0)" style="opacity: 1;"></path> 
 
        \t \t <path fill="none" stroke="#2A3033" stroke-width="6" stroke-linejoin="bevel" d="M5.0916788,44.95698C5.0916788,44.95698,52.908321,44.95698,52.908321,44.95698"></path> 
 
        \t </g> 
 
        </svg>

Answer 1

Вы не объясните, что вы имеете в виду под "не работает". Я собираюсь предположить, что вы имеете в виду, что переходы не работают?

В настоящее время только Chrome поддерживает использование анимаций и переходов CSS по атрибутам d.

Это потому, что d - это не свойство стиля. Спецификация SVG 1.1 гласит, что с помощью CSS можно создать только определенный набор свойств. Перечень этих свойств в SVG спецификации здесь:

https://www.w3.org/TR/SVG/propidx.html

Предстоящий SVG2 спецификации собирается сделать наиболее SVG атрибутов с помощью CSS, допускающих применение стиля. В этот момент, надеюсь, все браузеры будут поддерживать анимацию CSS на них. Но на данный момент только Chrome начал внедрять это изменение.