Animating Svg Pie Chart From 0% To 100% In Pure Smil
Solution 1:
you can apply a trasformation on your path like so:
<svgwidth="600"height="425"><pathd="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"fill="none"stroke="black"stroke-width="150"stroke-dasharray="0 600 600 0"stroke-dashoffset="1000"transform="translate(75,75) rotate(90,100,100) "><animateattributeType="XML"attributeName="stroke-dashoffset"from="0"to="600"dur="2s"repeatCount="1"fill="freeze"/></path></svg>The rotation transformation will make it start at 12o'clock and the translate will offset it half the stroke-width so it is inside the viewbox. Make sure you apply the transformation in the right order or you won't get the same result.
Update yes, you can avoid both transformations:
<svgwidth="600"height="425"><pathd="M 175, 175 m 0, -75 a 75,75 0 1,0 0,150 a 75,75 0 1,0 0,-150"fill="none"stroke="black"stroke-width="150"stroke-dasharray="0 600 600 0"stroke-dashoffset="1000"><animateattributeType="XML"attributeName="stroke-dashoffset"from="0"to="600"dur="2s"repeatCount="1"fill="freeze"/></path></svg>set a viewBox on your svg so you can scale the element and still get the whole image visible:
<svgwidth="600"height="425"viewBox="0 0 600 425"><pathd="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"fill="none"stroke="black"stroke-width="150"stroke-dasharray="0 600 600 0"stroke-dashoffset="1000"transform="translate(75,75) rotate(90,100,100) "><animateattributeType="XML"attributeName="stroke-dashoffset"from="0"to="600"dur="2s"repeatCount="1"fill="freeze"/></path></svg>If you're not scaling it proportionally check for the use of preserveAspectRatio to see which one suits you
Solution 2:
To solve the problem you posted in the update tag, please take a look into my comparison of 2 solutions: To perfom the animation in solution one, 2 semicircles are rotated. In the second solution as usual the stroke-dashoffset is animated. Both solutions are not pure SMIL but pure Web Animations API which I prefer. With help of the web-animations.min.js polyfill this code runs even in IE 11.
<html><head><metacharset="utf-8"><title>SVG mit CSS animieren</title><scriptsrc="web-animations.min.js"></script></head><body><h1>SVG mit CSS animieren</h1><main><h2>Kreis in SVG - mit CSS animiert</h2><svgwidth="400px"height="400px"viewBox="-1 -1 2 2"style="margin-left:20px; margin-top:10px; background: lightgray; border-radius: 50%"><pathid="slice1"fill="#c32e04"stroke="none"d="M0,1 a1,1 0 0,1 0,-2 z" /><pathid="slice2"fill="#c32e04"stroke="none"d="M0,1 a1,1 0 0,1 0,-2 z" /><pathid="slice_cover"fill="lightgray"stroke="none"d="M0,1 a1,1 0 0,1 0,-2 z" /><script>const duration=5000;
var anim11, anim12;
var slice1=document.getElementById("slice1");
var slice2=document.getElementById("slice2");
functionslice2_ontop() { slice2.parentNode.appendChild(slice2); }
anim11=slice1.animate([
{transform: 'rotate(0deg)'},
{transform: 'rotate(180deg)'}
], { duration: duration/2, iterations: 1, fill: "forwards"});
anim11.onfinish=slice2_ontop;
anim12=slice2.animate([
{transform: 'rotate(0deg)'},
{transform: 'rotate(360deg)'}
], { duration: duration, iterations: 1, fill: "forwards"});
</script></svg><svgwidth="400px"height="400px"viewBox="-1 -1 2 2"style="margin-left:20px; background: lightgray; border-radius: 50%; transform: rotate(-90deg)"><circleid="circle"cx="0"cy="0"r="0.5"fill="none"stroke="#c32e04"stroke-width="1px"style="stroke-dasharray: 3.1416 3.1416; stroke-dashoffset: 3.1416"/><script>var anim2;
anim2=document.getElementById("circle").animate([
{strokeDashoffset: '3.1416px'},
{strokeDashoffset: '0px'}
], { duration: duration, iterations: 1, fill: 'forwards'});
</script></svg></main></body></html>
Post a Comment for "Animating Svg Pie Chart From 0% To 100% In Pure Smil"