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

Omid Nikrah 发表于 Dev

奥米德·尼克（Omid Nikrah）

我的网页中有一些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>

保罗·勒博

您没有解释“不工作”的意思。我要猜测的是，您的意思是过渡无效吗？

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

这是因为d不是样式属性。SVG 1.1规范指出，只能使用CSS设置一组已定义的属性样式。这些属性的列表在SVG规范中：

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

即将发布的SVG2规范将使大多数SVG属性可通过CSS进行样式化。到那时，希望所有浏览器都支持CSS动画。但是，到目前为止，只有Chrome浏览器才开始实施此更改。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。