在纯SMIL中从0％到100％的SVG饼图动画 [英] Animating SVG pie chart from 0% to 100% in pure SMIL

问题描述

如何在纯SMIL中重新创建此SVG饼图动画?我希望抛弃复杂的JS，还能够控制动画的总持续时间:

http://jsfiddle.net/frank_o/gFnw9/19/

到目前为止，这就是我所得到的:

http://jsfiddle.net/frank_o/46mH2/(感谢伊恩)

但不幸的是:

• 它的位置离画布很远(或者不是一个完整的圆圈)
• 从9点开始而不是12点
• 使用Snap.svg(宁愿不依赖于任何外部库，但如果需要的话，将使用
)

HTML:

<svg width="600" height="425">
    <path d="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">
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="1s" repeatCount="1" fill="freeze"/> 
    </path>
</svg>

JS:

var s = Snap(600,600);

var c = s.circle(150, 150, 80).attr({
    fill: "none",
    stroke: 'red',
    strokeWidth: 161,
    strokeDasharray: "0 600 600 0",
    strokeDashoffset: 1000
});

Snap.animate(0,600, function( value ){ 
       c.attr({ 'strokeDashoffset': value })

},5000 );

更新:

问题:

应该是:

解决方案

您可以像这样在您的路径上应用变换:

<svg width="600" height="425">
    <path d="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) ">
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze"/> 
    </path>
</svg>

http://jsfiddle.net/46mH2/1/

旋转变换将使其从12点开始，平移会将其偏移到笔划宽度的一半，因此它位于视图框内.
确保以正确的顺序应用转换，否则将不会获得相同的结果.

更新
是的，您可以避免两种转换:

<svg width="600" height="425">
    <path d="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">
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze"/> 
    </path>
</svg>

http://jsfiddle.net/46mH2/3/

在svg上设置一个viewBox，以便您可以缩放元素并仍然使整个图像可见:

<svg width="600" height="425" viewBox="0 0 600 425">
    <path d="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) ">
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze"/> 
    </path>
</svg>

如果您没有按比例缩放它，请检查是否使用了serveAspectRatio来查看哪个适合您

How does one recreate this SVG pie chart animation in pure SMIL? I'm looking to ditch the complex JS and also be able to control the total duration of the animation:

http://jsfiddle.net/frank_o/gFnw9/19/

So far this is all I got:

http://jsfiddle.net/frank_o/46mH2/ (thanks Ian)

But unfortunately:

• it's positioned way off the canvas (or wasn't a full circle to begin with)
• starts at 9 o'clock as opposed to 12 o'clock
• uses Snap.svg (would rather not depend on any external libs but will if I have to)

HTML:

<svg width="600" height="425">
    <path d="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">
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="1s" repeatCount="1" fill="freeze"/> 
    </path>
</svg>

JS:

var s = Snap(600,600);

var c = s.circle(150, 150, 80).attr({
    fill: "none",
    stroke: 'red',
    strokeWidth: 161,
    strokeDasharray: "0 600 600 0",
    strokeDashoffset: 1000
});

Snap.animate(0,600, function( value ){ 
       c.attr({ 'strokeDashoffset': value })

},5000 );

UPDATE:

Problem:

Should be:

解决方案

you can apply a trasformation on your path like so:

<svg width="600" height="425">
    <path d="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) ">
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze"/> 
    </path>
</svg>

http://jsfiddle.net/46mH2/1/

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:

<svg width="600" height="425">
    <path d="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">
        <animate attributeType="XML" attributeName="stroke-dashoffset" from="0" to="600" dur="2s" repeatCount="1" fill="freeze"/> 
    </path>
</svg>

http://jsfiddle.net/46mH2/3/

set a viewBox on your svg so you can scale the element and still get the whole image visible:

<svg width="600" height="425" viewBox="0 0 600 425">
    <path d="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) ">
        <animate attributeType="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

这篇关于在纯SMIL中从0％到100％的SVG饼图动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！