0

如何在纯 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 );

更新：

问题：

在此处输入图像描述

应该：

在此处输入图像描述

4

2 回答 2

2

您可以像这样在路径上应用转换：

<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 看看哪个适合您

于 2014-07-10T23:09:09.603 回答
0

要解决您在更新标签中发布的问题，请查看我对 2 个解决方案的比较： 执行解决方案一中的动画，旋转 2 个半圆。在第二个解决方案中，stroke-dashoffset 是动画的。这两种解决方案都不是纯 SMIL，而是我更喜欢的纯 Web Animations 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>
于 2019-02-09T15:14:15.333 回答