外部ファイルSVGをjQueryで操作する方法｜Gimmick log
インラインで書かれたSVGなら通常通りjQueryで操作可能だったのですが、大量のコードが書かれていた場合などはSVGを外部ファイル化して読み込む方が何かと便利です。 その場合はjQueryの記述方法を少しアレンジする必要があります。 デモページのパンダの白い部分、黒い部分をマウスオーバーしてみてください。 白い部分は白のエリア全体の色が変わり、黒はマウスオーバーした部分のみが変わります。 デモページ 今回はIllustratorでSVGに書きだしたものを使用しています。 以下のように、動作を分けるレイヤーごとにまとめて半角英数でレイヤー名をつけておくと、id名としてSVGファイルに継承されます。 デモではパンダの黒い部分にblack、白い部分にwhiteとつけています。 サンプルSVGファイル SVGに書き出す [ファイル]＞[スクリプト]＞[ドキュメントをSVGとして保存]を選択すると
css3とjQueryで柔軟に実装できるSVG線画アニメーション
アジケでフロントエンドエンジニアを始めて10か月の小松です。 今回はSVGを用いた線画アニメーションの簡単な実装方法をお伝えします。 実はこの技術は最近リニューアルした弊社ホームページでも利用しました(こちらです)。 画像がリアルタイムで描かれているような表現が可能になり、まさにSVGならではの表現方法と言えます。 目次 ・SVGとは？ ・線画アニメーションを実装するために必要な技術 ・サンプル実装 1. SVGとは？ 「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。」(wikipediaより引用) なんだかよくわかりませんが凄くざっくり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
