Menu
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).
683
The d attribute defines a path to be drawn. A path definition is a list of path commands where each command is composed of a command letter and numbers that represent the command parameters.
Overview. SVG graphics can be animated using animation elements. The animation elements were initially defined in the SMIL Animation specification; these elements include: <animate></animate> – which allows you to animate scalar attributes and properties over a period of time.
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="400px" height="400px" viewBox="-500 100 1500 1500"> <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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
