Question

我的网页上有一些SVG，我想在点击时设置动画，所以我编写了以下代码，但它只适用于谷歌浏览器，而不适用于Firefox或Safari。

我的代码：

＆＃13;

    $('#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');
        }

    });

＆＃13;

*{

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;
            }
}

＆＃13;

<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>

＆＃13;

Answer 1

你没有解释“不工作”的含义。我猜你的意思是过渡不起作用？

目前只有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中无效

1 个答案: