Question

我正在尝试制作圆环图，我希望在值变化时为半圆路径设置动画，但“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/

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

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动画半圆路径

1 个答案: