css 过渡动画不适用于 svg 路径的“d”属性更改
Posted
技术标签:
【中文标题】css 过渡动画不适用于 svg 路径的“d”属性更改【英文标题】:css transition animation doesn't work on svg path's "d' attribute change 【发布时间】:2015-12-20 04:35:43 【问题描述】:jsFiddle
我正在尝试将 css 转换应用于 svg 各种元素。 transition: all 2s
非常适合圆形,但不适用于路径。
还有比“全部”更具体的东西吗?
编辑:
下面的链接有更多关于 svg 线或路径动画的信息......而且似乎 css 过渡还不可能......
Can you use CSS transitions on SVG attributes? Like y2 on a line?
【问题讨论】:
【参考方案1】:过渡只能应用于表示属性,以及一些其他属性,例如 x、y、cx、cy ... 可以在此处找到支持的属性列表http://dev.w3.org/SVG/proposals/css-animation/animation-proposal.html 不幸的是 d 不是其中之一......
由于跨浏览器仍然不可靠地支持这一点,您可以使用 SMIL 动画来实现相同的结果。
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- 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>
【讨论】:
我正在重构我的所有代码以使用svg:line
而不是svg:path
...该死...
jsfiddle.net/rnhu7673/4 更改为 line,尽管 x2 和 y2 在文档中,但它没有动画。
你是对的,链接网站是一个提案,并非所有属性都支持。例如,您的小提琴在 Firefox 中根本不起作用。最安全的方法是在转换不起作用的情况下使用 SMIL...以上是关于css 过渡动画不适用于 svg 路径的“d”属性更改的主要内容,如果未能解决你的问题,请参考以下文章