Javascript SVG动画路径'；s-d属性
是否可以使用SVG为Javascript SVG动画路径'；s-d属性,javascript,animation,svg,bezier,Javascript,Animation,Svg,Bezier,是否可以使用SVG为的d属性设置动画 我可以将菱形和圆形绘制为由八条贝塞尔曲线组成的路径： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script> jQuery(function($){ var a = 50;
d<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
jQuery(function($){
var a = 50;
var draw = function(b, c, d, e, f){
return [
'M', a, 0,
'C', b, c, ',', d, e, ',', f, f,
'C', e, d, ',', c, b, ',', 0, a,
'C', -c, b, ',', -e, d, ',', -f, f,
'C', -d, e, ',', -b, c, ',', -a, 0,
'C', -b, -c, ',', -d, -e, ',', -f, -f,
'C', -e, -d, ',', -c, -b, ',', 0, -a,
'C', c, -b, ',', e, -d, ',', f, -f,
'C', d, -e, ',', b, -c, ',', a, 0,
].join(' ');
};
$('#diamond').attr({ d: draw( 5*a/6, a/6, 2*a/3, a/3, a/2 ) });
$('#circle' ).attr({ d: draw( a, a*Math.PI/12, (2 + 1/Math.sqrt(2))*a/3, a*Math.PI/6, a/Math.sqrt(2) ) });
});
</script>
</head>
<body>
<svg width="200" height="200">
<g transform="translate(100,100)">
<path id=diamond fill="blue" stroke="black"/>
</g>
</svg>
<svg width="200" height="200">
<g transform="translate(100,100)">
<path id=circle fill="red" stroke="black"/>
</g>
</body>
</html>
jQuery（函数（$）{
var a=50；
var draw=函数（b、c、d、e、f）{
返回[
“M”，a，0，
‘C’，b，C，’，d，e，’，f，f，
"C,e,d","C,b","0,a,，
‘C’，-C，b’，‘e，d’，‘f，f，
"C","d,e","b,C","a,0,，
"C","b","C","d","e","f",，
‘C’、-e、-d’、‘C、-b’、‘0、-a、，
‘C’，C，-b，’，e，-d，’，f，-f，
"C,d,e","b,C","a,0,，
].加入（“”）；
};
美元("钻石").attr(d:draw(5*a/6,a/6,2*a/3,a/3,a/2))；
$（#circle'）.attr（{d:draw（a，a*Math.PI/12，（2+1/Math.sqrt（2））*a/3，a*Math.PI/6，a/Math.sqrt（2））；
});
（圆形和菱形只是一个例子——实际上我想在两个由相同数量的贝塞尔曲线构成的任意实体之间过渡）。这是可能的。这里有许多为路径的d元素设置动画的示例：包括为bezier曲线设置动画。您应该能够根据您的特定用例调整一个 这是不带圆弧标志动画的path15。大圆弧标志只能是0或1，因此线性设置其动画没有多大意义