Question

如何在纯SMIL中重新创建此SVG饼图动画？我想放弃复杂的JS，并且能够控制动画的总持续时间：

到目前为止，这就是我得到的全部内容：

http://jsfiddle.net/frank_o/46mH2/（感谢Ian）

但不幸的是：

它位于离开画布的位置（或者不是一个完整的圆圈开始）
从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 );

更新

问题：

enter image description here

应该是：

enter image description here

Answer 1

您可以在路径上应用转换，如下所示：

<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>

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

Answer 2

要解决您在update标记中发布的问题，请看一下我对2种解决方案的比较：要在解决方案一中执行动画处理，请旋转两个半圆。在第二个解决方案中，照常将笔划破折号设置为动画。两种解决方案都不是纯SMIL，而是我更喜欢的纯Web动画API。借助web-animations.min.js polyfill，即使在IE 11中也可以运行此代码。

<html>
<head>
  <meta charset="utf-8">
  <title>SVG mit CSS animieren</title>
  <script src="web-animations.min.js"></script>
</head>
<body>
<h1>SVG mit CSS animieren</h1>

<main>
<h2>Kreis in SVG - mit CSS animiert</h2>
<svg width="400px" height="400px" viewBox="-1 -1 2 2" style="margin-left:20px; margin-top:10px; background: lightgray; border-radius: 50%">
  <path id="slice1"      fill="#c32e04"   stroke="none" d="M0,1 a1,1 0 0,1 0,-2 z" />
  <path id="slice2"      fill="#c32e04"   stroke="none" d="M0,1 a1,1 0 0,1 0,-2 z" />
  <path id="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");
     function slice2_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> 
<svg width="400px" height="400px" viewBox="-1 -1 2 2" style="margin-left:20px; background: lightgray; border-radius: 50%; transform: rotate(-90deg)">
  <circle id="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>

在纯SMIL中将SVG饼图的动画设置为0％到100％

2 个答案: