CSS过渡动画不适用于SVG路径的"d"属性更改 [英] css transition animation doesn't work on svg path's "d' attribute change

问题描述

jsFiddle

我正在尝试将CS​​S转换应用于svg的各种元素. transition:所有2s 都适用于圆形，但不适用于路径.

I'm trying to apply css transition to svg various elements. transition: all 2s works great for circle however it doesn't work for path.

还有什么比全部"更具体的?

How is there something more specific then "all"?

已

下面的链接中有更多关于svg线或路径动画的信息...看来，css过渡还不可能...

Below link has more info animating svg line or path... and it seems that it is not possible with css transition yet...

您可以使用吗SVG属性上的CSS过渡?像y2一样?

推荐答案

过渡只能应用于表示属性，以及其他一些属性，例如x，y，cx，cy ...可以在此处 http://dev中找到支持的属性列表.w3.org/SVG/proposals/css-animation/animation-proposal.html 不幸的是d不是其中之一...

Transitions can only be applied to presentation Attributes, and a few other attributes such as x, y, cx,cy ... a list of supported attributes can be found here http://dev.w3.org/SVG/proposals/css-animation/animation-proposal.html Unfortunately d isn't one of them...

由于仍无法在浏览器中可靠地支持，因此您可以使用SMIL动画获得相同的结果.

as this is still not supported reliably across browsers, you can use SMIL animations to achieve the same result.

var type = true;

setInterval(function() {
    $("#path").attr('from', type ? "M 0 0 L 50 100" : "M 0 0 L 100 50");
    $("#path").attr('to', type ? "M 0 0 L 100 50" : "M 0 0 L 50 100");
    $("#path")[0].beginElement()
    $("#circle").attr('from', type ? "40" : "10");
    $("#circle").attr('to', type ? "10" : "40");
    $("#circle")[0].beginElement()
    type = !type;
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
    <path stroke="#000000" stroke-width="5" d="M 0 0 L 100 50" >  
        <animate id="path" attributeName="d" from="M 0 0 L 100 50" to="M 0 0 L 50 100" dur="1s" fill="freeze"/>
    </path>
    <circle fill="#0000FF" cx="10" cy="50" r="10" >
        <animate id="circle" attributeName="cx" from="10" to="40" dur="1s" fill="freeze"/>
    </circle>
</svg>

这篇关于CSS过渡动画不适用于SVG路径的"d"属性更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！