2

onLoadで時計回りにアニメーション化する円グラフにこだわっています。これが私の円グラフのフィドルです

たとえば、ブレジェ曲線のパスを操作するには、このアニメーションが必要です。

<path d="M 276 63.03 C 329.93 63.03 381.86 78.24 421.4 105.63 L 276 222.79 M 276 63.03" />

また、snap.svg ライブラリを使用して実現できることも認識していますが、この場合はワークアウトできません。

どんな助けでも大歓迎です。

前もって感謝します！

4

1 に答える 1

1

ネストされたものを使用animateして、漸進的な遅延でいくつかの属性を変更できます。

この例では、各スライスgの塗りの内側にストロークを配置し、内側に要素を追加しました。各アニメーションは 0.5 秒から始まります。属性をアニメーション化しました(そのため、各要素に属性を追加しました。別の属性に置き換えることができます)。これは 2 番目のスライスです。ganimateopacityopacity="0"

<g id="pieFillSection2" opacity="0" style="fill: yellow;fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" >
    <animate attributeName="opacity" from="0" to="1"
             begin="0.5s" dur="1s" fill="freeze"/>
    <path d="M 421.4 105.63 C 483.64 148.74 505.87 215.26 478.05 275.16 C 450.23 335.05 377.64 377 293.04 382.05 L 276 222.79 M 421.4 105.63" />
    <g class="pieStroke" id="pieStrokeSection2" style="stroke-width: 1.0;stroke: rgb(128,128,128);stroke-opacity: 1.0; fill: none" transform="matrix(1,0,0,1,0,0)" >
        <path d="M 421.4 105.63 C 483.64 148.74 505.87 215.26 478.05 275.16 C 450.23 335.05 377.64 377 293.04 382.05 L 276 222.79 M 421.4 105.63" />
    </g>
</g>

更新されたJSFiddleを確認します。

于 2014-04-04T14:18:40.757 に答える