JavaScript に依存せず、純粋な CSS を使用して 基本: SVG には比較的重要な属性ブランチ 1. なし <色> 現在の色 2. 3.stroke 4.stroke 5.stroke なし <ダシャレイ> 継承する 7.stroke 8.stroke このチュートリアルに関連するアニメーション効果は ストロークダシャアレイとストロークダッシュオフセット 便宜上、また干渉を減らすために、次のように直線で栗を揚げてみましょう。 以下のスライダーをクリック(または値入力)して、次の操作を体験してください。 ストローク-ダッシュ配列: ストローク-ダッシュオフセット: HTML コードは次のとおりです。 <svg id="svgForStroke" 幅="400" 高さ="200" xmlns="http://www.w3.org/2000/svg"> <g> <line fill="none"stroke="#000000"stroke-width="5"stroke-dasharray="null"stroke-linejoin="null"stroke-linecap="round" x1="0"y1="90"x2="400"y2="90"/> </g> </svg> スライダーを動かすと(またはテキストボックスに入力すると)、setAttribute メソッドを通じて <line> ノード要素のstroke-dasharray 値とstroke-dashoffset 値が設定され、上記の効果が得られます。 特別なケース ここで考えてみましょう。stroke 中国語で説明すると、ソーセージの長さは12cmで、15cm間隔で点線を引くことになります。 ここで 両方のスライダーを右にスライドし、次にスライダーをゆっくりと左にスライドします (type=range をサポートするブラウザを使用してください)。ゆっくりと直線が表示されます。これが SVG パス アニメーションの原理です。 CSS3 インライン SVG の強みは、従来の高さや幅の配置、境界線や背景色などを処理しながら、CSS 属性で制御できる HTML 要素でもあるという点にあります。SVG 自体のいくつかの特殊な属性も、CSS3 したがって、上で説明した SVG ストローク アニメーション効果は、JavaScript を使用せずに CSS3 CSS コードは次のとおりです。 パス { ストロークダッシュ配列: 1000; ストロークダッシュオフセット: 1000; アニメーション: ダッシュ 5 秒 直線 無限; } @keyframes ダッシュ { に { ストロークダッシュオフセット: 0; } } 1000 には特別な意味はありません。各パスの長さよりも大きいことを確認するのに十分な大きさです。1500 も使用できますが、違いはストロークの速度が少し速くなることです。 CSS3 アニメーション プロパティに詳しい人なら、上記のコードの意味を一目で理解できるはずです。5 秒のアニメーションでは、stroke-dashoffset が 1000 から 0 に変化します。ストローク アニメーションが形成されます。 上記の CSS コードはほぼ普遍的です。 SVG パスがどんなに複雑であっても、そのストロークをアニメーション化できます。私の独自のテストによると、IE10+ ではアニメーション効果はありません。これは、CSS が SVG のストロークに関連する属性をサポートしていないためではなく、アニメーションがストロークに関連する属性のアニメーションをサポートしていないためです。 上記のエフェクトの用途は何でしょうか? 次のようなシナリオを思いつきました。デモンストレーション中にいくつかの重要なポイントを段階的に表示する、写真にホバー ストローク エフェクトを適用する、Web サイトのヒント項目に矢印ガイダンス エフェクトを適用するなど、いずれも非常に便利です。 パスの長さ パス、または線の正確な長さを知りたい場合。次のコードのような JavaScript を使用する必要がある場合があります。 var パス = document.querySelector('パス'); var 長さ = path.getTotalLength(); 参考文献 ポリゴンフィーチャーデザイン: 楽しみと利益のための SVG アニメーション SVG でベクターをアニメーション化する SVG ラインアニメーションの仕組み SVG でのアニメーション線画 W3 – ストロークのプロパティ チュートリアルの転送元: https://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%e5%8a%a8%e7%94%bb-%e8%b7%af%e5%be%84/ 要約する 上記は、CSS3 を使用して SVG パス ストローク アニメーション効果を実現する方法の入門チュートリアルです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: HTM と HTML の違いは何ですか? HTM と HTML の違いは何ですか?
>>: Dockerはクロスプラットフォーム機能を実現するためにnet5プログラムを導入
コードをコピーコードは次のとおりです。 <スタイル> .fileInputContain...
目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...
過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...
目次作成機能配列プロトタイプの削減Array.prototype.reduceRightパイプ関数作...
展開環境: ここでは docker コンテナ、Linux システム、VmWare 仮想マシンが使用さ...
Linux には、2 種類のファイル接続があります。1 つは Windows のショートカットに似て...
この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...
ほとんどの場合、PC でファイルをアップロードするにはプラグインが使用され、フラッシュが導入されても...
1. Macvlan の紹介Macvlan が登場する前は、イーサネット カードに複数の IP ア...
新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるか...
目次01 Kubernetes とは何ですか? 02 KubernetesとCompost+Swar...
1. 依存パッケージをインストールする yum -y インストール gcc-c++ ncurses-...
背景: DBA として、大規模なテーブルの DDL 変更のほとんどは、Percona の pt-on...
Linux は、システム内のデバイス、インターフェース、ファイル、スタートアップ、アプリケーション ...
MySQL で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...