svg 动画半圆路径

Question

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

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

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

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

svg 动画半圆路径

svg animating a semi-circle path

animation

svg