SVGアニメーション

画像SVG

2種類

 状態:試行錯誤中  閲覧数:2,004  投稿日:2015-05-15  更新日:2015-05-15
実装手段は下記何れか
・CSS JS

比較表
- CSS JS
難易度 易しい 難しい
出来ること 限られている CSSでは実装出来ないことでも可能


SVGアニメーションの種類

 閲覧数:502 投稿日:2015-05-15 更新日:2015-06-13

3種類



アニメーションだからと「一括り」にして考えてはいけない
・同じように見えて、実装方法は全く異なる

アニメーションしているように見せかけるためには?
・アニメーション内容に応じて、どのSVG機能を使用するかを、知ることが大事

よく使用するアニメーション一覧
- 概要 備考
線を引く stroke-dasharrayで点線や破線のパターンを指定。stroke-dashoffset プロパティで点線の開始位置を指定 -
pathに沿ってsvgオブジェクトを移動させる - -
pathに沿ってテキストを移動させる - -能



SVG

SVGイラスト素材



週間人気ページランキング / 2-12 → 2-18
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 11
2 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 9
3 鉄道会社毎のカラーコード | カラーコード(色) 7
3 RGB ⇔ Lab | 色変換(色) 7
4 「bgcolor」「background-color」「background」の違い | CSS 5
4 16進数カラーコード / 2進数 5
5 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 Design 0 4
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 4
6 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
6 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 3
7 ログイン 2
7 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 2
7 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 2
7 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
7 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; | CSS 2
7 24ビットカラーにおけるHLS要素範囲 / 最小値 ~ 最大値 2
2025/2/19 1:01 更新