Javascript SVG 动画路径的 d 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8191300/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG animate path's d attribute
提问by rampion
Is it possible to use SVG to animate the dattribute of <path>?
是否可以使用 SVG 为 的d属性设置动画<path>？
I can draw both a diamond and a circle as a path made of eight bezier curves:
我可以将菱形和圆形绘制为由八条贝塞尔曲线组成的路径：
<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>
I'd like to animate the transformation from one to the other.
我想动画从一个到另一个的转换。
I could simulate this in javascript (just by linearly interpolating the bezier curve parameters at certain times), but I want to know if there's a way to do it with SVG.
我可以在 javascript 中模拟这个（只需在特定时间线性插值贝塞尔曲线参数），但我想知道是否有办法用 SVG 来做到这一点。
(The circle and diamond are just an example - in reality I'd like to transition between two arbitrary solids made of the same number of bezier curves).
（圆形和菱形只是一个例子 - 实际上我想在由相同数量的贝塞尔曲线组成的两个任意实体之间过渡）。
回答by Robert Longson
It's possible. There are lots of examples of animating the d element of a path here: http://hoffmann.bplaced.net/svgtest/index.php?in=attributes#pathdincluding animating bezier curves. You should be able to adapt one for your specific use case.
这是可能的。这里有很多动画路径的 d 元素的示例：http: //hoffmann.bplaced.net/svgtest/index.php?in=attributes#pathd 包括动画贝塞尔曲线。您应该能够针对您的特定用例调整一个。
This is path15 without the arc flag animation. The large arc flag can only be 0 or 1 so animating it linearly doesn't make a lot of sense.
这是没有弧形标志动画的 path15。大弧标志只能是 0 或 1，因此线性动画它没有多大意义。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px" viewBox="-500 -500 1000 1000">
<path id="p1"
d="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
stroke="blue" fill="none"
stroke-width="4" />
<animate xlink:href="#p1"
attributeName="d"
attributeType="XML"
from="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
to="M 300 600 A 300 400 -20 1 0 400 200 a 200 600 -50 0 1 100 400"
dur="10s"
fill="freeze" />
</svg>
