menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/06/24
  • CSS
  • html5
  • SVG

インラインSVGのPathへのリンク設定やCSSを使用したいろいろ。

インラインSVGを使用して各Pathへリンクを設定できたりするととても便利です。今回はリンクの設定とCSSを使用したPathのアニメーションなどの設定も簡単に説明いたします。
svg-hover

使用方法

DEMO

・体や髪などにマウスホバーで色が変わります。
・まつげにマウスホバーでアニメーションします。
・唇をクリックすると新規ページへリンクします。

See the Pen gMgaez by brightonline (@brightonline) on CodePen.0

HTML

HTMLにSVGを埋め込みます。

インラインSVG

illustratorでこのような画像をSVGで保存します。
svg-hover-1
作成したSVGファイルをTEXTファイルなどで読み込むと下記のようなコードが読み込まれます。
<svg>から</svg>までhtmlに書き込みます。

リンクの設定方法

リンクさせたい部分のpathを「a xlink:href=〜」で囲みます。

CSSでエフェクト

html

pathに「idやclass」要素を追加します。

CSS

CSSは特別なものは何もありません。
pathに追加した要素にマウスホバー後の色や、transformで動きの設定をします。

MAPや製品の説明などSVGを使用すれば面白い表現がたくさんできると思います。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11