0
私は基本的に円グラフの形をしたSVGを20個のスライスで持っています。私はスライスの色を変えたいと思いますが、各スライスは以前のものとは少し遅れています（時計のようなものです）。私はjQueryとプレーンなjavascriptだけでなく、運がないCSSの移行を試みました。私は速度も試しましたが、すべてのスライスは同時に変わります。ここで速度を使ってsvgオブジェクトのリストをアニメ化する
は私のコードです：
var color1 = "#FF0000";
var slices = $("#s4-pie").find("path");
for (i = 0; i < slices.length; i++) {
var delay = (1000 * i);
$(slices[i]).velocity({ fill: color1, delay: delay, duration: 1000, loop: 1});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.1/velocity.min.js"></script>
<div>
<svg id="s4-pie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs id="defs"/><rect x="0" y="0" width="200" height="200" stroke="none" stroke-width="0" fill="#424242"/><g><path d="M100,100L100,10A90,90,0,0,1,123.29371405922686,13.066675633983849L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L123.29371405922686,13.066675633983849A90,90,0,0,1,145,22.05771365940052L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L145,22.05771365940052A90,90,0,0,1,163.63961030678928,36.73L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L163.63961030678928,36.73A90,90,0,0,1,177.94228634059948,55.00000000000001L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L177.94228634059948,55.00000000000001A90,90,0,0,1,186.93332436601617,76.70628594077314L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L186.93332436601617,76.70628594077314A90,90,0,0,1,190,100L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L190,100A90,90,0,0,1,186.93332436601617,123.29371405922686L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L186.93332436601617,123.29371405922686A90,90,0,0,1,177.94228634059948,145.00000000000003L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L177.94228634059948,145A90,90,0,0,1,163.63961030678928,163.63961030678928L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L163.63961030678928,163.63961030678928A90,90,0,0,1,145,177.94228634059948L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L145,177.94228634059948A90,90,0,0,1,123.29371405922686,186.93332436601617L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L76.70628594077314,13.066675633983849A90,90,0,0,1,100,10L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L54.99999999999996,22.057713659400534A90,90,0,0,1,76.70628594077314,13.066675633983849L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L36.706,36.73A90,90,0,0,1,54.99999999999996,22.057713659400534L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L22.05771365940052,54.99999999999999A90,90,0,0,1,36.706,36.73L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L13.066675633983849,76.70628594077317A90,90,0,0,1,22.05771365940052,54.99999999999999L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L10,100.00000000000001A90,90,0,0,1,13.066675633983849,76.70628594077317L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L13.066675633983863,123.29371405922689A90,90,0,0,1,10,100.00000000000001L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g><g><path d="M100,100L22.05771365940052,145A90,90,0,0,1,13.066675633983863,123.29371405922689L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L36.73,163.63961030678928A90,90,0,0,1,22.05771365940052,145L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g><path d="M100,100L55.00000000000002,177.94228634059948A90,90,0,0,1,36.73,163.63961030678928L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#15092e"/></g><g><path d="M100,100L76.70628594077313,186.93332436601617A90,90,0,0,1,55.00000000000005,177.9422863405995L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#24124a"/></g>
<g><path d="M100,100L100,190A90,90,0,0,1,76.70628594077313,186.93332436601617L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#422480"/></g><g><path d="M100,100L123.29371405922686,186.93332436601617A90,90,0,0,1,100,190L100,100A0,0,0,0,0,100,100" stroke="#424242" stroke-width="1" fill="#633ab5"/></g><g/></svg>
</div>あなたが各要素に遅延がアニメ化されるように適用するにはどうすればよいですか？
ありがとう！私はそれが実行可能でなければならないことを知っていた。 –