svg線アニメーション

他の人のウェブサイトのsvgアニメーションを見てとても心地良くて、自分で試みて効果を実現して以下の通りです:
実装にはsvgに関する2つのcss属性を理解する必要がある
1. stroke-dasharray stroke-dasharray: | | inheritの数と数の間をカンマまたは空白で区切って、ダッシュと切り欠きの長さを指定します.stroke-dasharray:30 20;のように、効果は以下の通りです.
注意:可視領域シミュレーションsvgのサイズは便利です.次にアニメーションを理解します.stroke-dasharray:50;値が1つの値であれば、短い線は切り欠きと同じ長さです.
2. stroke-dashoffset stroke-dashoffset: | | inheritは、dashモードから経路開始までの距離を指定します.つまり、オフセット量がstroke-dasharray属性を書かなければ、stroke-dashoffset属性は花を書いても効果が見えません.stroke-dasharray:50;stroke-dashoffset:25pxの効果は以下の通りです.
この線は左に25 px移動しましたstroke-dasharray:200; stroke-dashoffset:0pxをもう一度試してみます
そしてアニメはstroke-dashoffsetの値を0から200にすると出てきます
具体的な効果はこちら
3.demoアドレス
最後に開編拡大鏡のアドレス拡大鏡を添付します
まとめ
アニメーションは実際にはstroke-dashoffsetの値の変化によって実現され、各線のアニメーションは実際には無限の欠陥の一つであり、他のものはsvgの外に隠されているだけだ.各pathまたは他の線の長さ(顔を覆うように設計できる)を取得し、stroke-dasharrayとstroke-dashoffsetの値を線の長さに設定すると線が消え、アニメーションでstroke-dashoffsetを0に設定すればOKです.
本編がお役に立てば幸いです.不合理な点があれば皆さんもご指摘ください