FirefoxとSafariでsvgの変更パスが機能しない

Question

私のWebページにSVGがいくつかありますが、これをクリックしてアニメーションしたいので、次のコードを書きましたが、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はd属性でCSSアニメーションとトランジションを適用することをサポートしています。

dはスタイルプロパティではありません。 SVG 1.1の仕様では、定義済みのプロパティセットのみをCSSでスタイル設定することができます。これらのプロパティのリストは、ここではSVG仕様にされています

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

今後のSVG2の仕様では、SVGは、CSSを経由してスタイル可能属性を最大限に活用する予定です。その時点で、うまくいけばすべてのブラウザがCSSアニメーションをサポートします。しかし、今のところ、Chromeだけがこの変更を実装し始めました。