svg 动画半圆路径答案

【问题标题】：svg animating a semi-circle pathsvg 动画半圆路径
【发布时间】：2015-01-01 13:50:57
【问题描述】：

我正在尝试制作一个圆环图，我想在值发生变化时为半圆路径设置动画，但“d”路径的变换看起来并不“自然”。这是我到目前为止得到的：

<svg height="400" width="400" style="background: #fff">
  <g transform="translate(200,200), scale(75)" stroke-width="0.01" stroke="white">
    <path d="M 1 0 L 2 0 A 2 2 0 0 1 -1.03903 -0.166952 L -0.519515 -0.0834762 A 1 1 0 0 0 1 0" stroke-width="0.01" stroke="black" fill="green">
      <animate attributeName="d" from="M 1 0 L 2 0 A 2 2 0 1 1 0.10467191248588789 -1.9972590695091477 L 0.052335956242943946 -0.9986295347545738 A 1 1 0 1 0 1 0" to="M 1 0 L 2 0 A 2 2 0 0 1 -1.7492394142787915 0.9696192404926743 L -0.8746197071393957 0.48480962024633717 A 1 1 0 0 0 1 0" dur="1s" repeatCount="indefinite"></animate>
    </path>
  </g>
</svg>

我创建了一个 jsfiddle 来现场观看，转换看起来很可怕 :)

http://jsfiddle.net/zm03d6La/

我希望有一种方法可以像在路径之后那样对其进行动画处理，这样动画看起来就像圆圈继续变大或变小，但在动画时不会向奇怪的方向移动。在此先感谢丹尼尔。

【问题讨论】：

您需要绘制圆弧，以使大圆弧和扫掠标志在动画期间不会改变。 Firefox 拒绝此类动画正是因为它们无法正常工作。
我可以像圆的动画路径一样创建动画吗？
即使你避免从弧形标志处突然跳跃，你也不会得到你想要的动画。当您为d 属性设置动画时，点会以直线过渡。你真的必须使用 JavaScript 来让点沿弧线的曲线动画。 d3 有很多可用的示例，您可以查看它们的源代码并进行调整。
我不想依赖第 3 方库，我看到您可以使用路径（也可以是曲线）来制作动画，但我不知道如何使用路径圆来变形
You may find this example useful.

标签： animation svg

【解决方案1】：

Live demo. 只需根据需要调整路径即可。

.path {
  stroke-dasharray: 500;
  stroke-dashoffset: 0;
  animation: dash 10s;
  animation-fill-mode: both;
}

@keyframes dash {
  from { stroke-dashoffset: 500; }
  to { stroke-dashoffset: 0; }
}

<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 500" xml:space="preserve">
    <path style="fill:#FFFFFF;stroke:green;stroke-miterlimit:10;" stroke-width="50" d="M98,127c0,0,1.614,107.653,92,116s108-116,108-116" class="path"/>
</svg>

【讨论】：

非常感谢您的回答，这正是我所需要的！干杯！
谢谢.. 如果你喜欢这样，你也可以从这个Codepen demo 中得到启发，了解如何绘制一个似乎是随机绘制的圆圈。