SVG动画路径公司的D属性 [英] SVG animate path's d attribute
问题描述
是否可以用SVG动画 D 属性＆LT;路径＆GT;
我可以得出两者的钻石和一个圆的做八种Bezier曲线路径：
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆所述; SCRIPT SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;
jQuery的（函数（$）{
VAR一个= 50; VAR平局=功能（B，C，D，E，F）{
返回[
M，一，0， 'C'，B，C，'，'，D，E，'，'，F，F，
C，E，D，'，'，C，B，'，'，0，一， 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，'，'，即-d，'，'，F -f，
C，D，-e，'，'，B，-c，'，'，一，0，
]。加入（''）;
}; $（'＃金刚石'）ATTR（{D：拉伸（5 *一/ 6，一/ 6,2 * A / 3，A / 3，A / 2）}）;
$（'＃圆'）.attr（{D：拉伸（一个，一个* Math.PI / 12，（2 + 1 /的Math.sqrt（2））* A / 3，* Math.PI / 6，一个/的Math.sqrt（2））}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆所述; SVG宽度=200HEIGHT =200＆GT;
＆LT克变换=翻译（100,100）＆GT;
＆LT;路径ID =钻石填充=蓝色行程=黑/＆GT;
＆所述; / g取代;
＆LT; / SVG＆GT;
＆所述; SVG宽度=200HEIGHT =200＆GT;
＆LT克变换=翻译（100,100）＆GT;
＆LT;路径ID =圈填充=红行程=黑/＆GT;
＆所述; / g取代;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我想从一个到另一个动画的转变。</ P>
我可以在JavaScript（只是通过线性插值在某些时候贝塞尔曲线参数）模拟这一点，但我想知道是否有一种方法与SVG做到这一点。
（圆和菱形只是一个例子 - 在现实中，我想取得相同数量的贝塞尔曲线的两个任意的固体之间转换）
。这是可能的。有很多动画这里路径的D元素的例子：<一href=\"http://hoffmann.bplaced.net/svgtest/index.php?in=attributes#pathd\">http://hoffmann.bplaced.net/svgtest/index.php?in=attributes#pathd包括动画贝塞尔曲线。您应该能够适应一个特定用例。
这是无电弧标志动画path15。大弧形标志只能是0或1，因此其动画线性不会使有很大的意义。
＆LT; SVG的xmlns =http://www.w3.org/2000/svg版本=1.1WIDTH =500px的高度=500px的视框= -500 -500 1000 1000＆GT;
＆LT;路径ID =P1
D =M 100 100 A 200 400 30 1 0 600 200 300 100 45 1 0 200 -300
行程=蓝色补=无
笔画宽度=4/＆GT;
＆LT;动画的XLink：HREF =＃P1
的attributeName =D
属性类型=XML
从=M 100 100 A 200 400 30 1 0 600 200 300 100 45 1 0 200 -300
为=M 300 600 300一400 -20 1 0 400 200 200 600 -50 0 1 100 400
DUR =10秒
填写=冻结/＆GT;
＆LT; / SVG＆GT;
Is it possible to use SVG to animate the d attribute of <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.
(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).
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#pathd including animating bezier curves. You should be able to adapt one for your specific use case.
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.
<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>
这篇关于SVG动画路径公司的D属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
