svg 更改路径在 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>
                      <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>
                      <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>
                      <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>
                     </g>
                    </svg>

Answer 1

您没有解释 "Not working" 的意思。我猜你的意思是 transitions 不起作用？

目前只有 Chrome 支持在 d 属性上应用 CSS 动画和过渡。

这是因为 d 不是样式属性。 SVG 1.1 规范声明只有一组已定义的属性可以使用 CSS 设置样式。这些属性的列表在此处的 SVG 规范中：

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

即将推出的 SVG2 规范将使大多数 SVG 属性可通过 CSS 设置样式。到那时，希望所有浏览器都支持 CSS 动画。但是，截至目前，只有 Chrome 开始实施此更改。

svg 更改路径在 Firefox 和 Safari 中不起作用

svg change path not working in Firefox and Safari

jquery

svg

path

jquery-animate

svg-animate