コンテンツ
ネットマガジンとCreativeBloqに関連してTuts + Premiumによって作成されたスクリーンキャスト。
画像マップはWeb上で非常に長い歴史があり、HTMLの初期バージョンで紹介された後、すぐに人気を博しました。この特定の種類のビジュアルナビゲーションの使用は、一部には、画像マップの「ホットスポット」インターフェイス領域がピクセルで定義されているという事実のために、近年減少しています。
これにより、構築が困難で面倒になりましたが、このプロセスの結果は応答しませんでした。画像マップ内の画像のサイズが変更されると、関連するハイパーリンクが下にある視覚要素との登録から外れ、ナビゲーションがハンティングのケースになります。 、クリックして運。これにより、従来の画像マップは最新のモバイルWebサイトのデザインには不適切になりますが、特にインタラクティブな図や地理的な場所では、依然として貴重なユーザーインターフェイスパターンです。
少し巧妙に、SVGのパワーを使用して、従来のバージョンの欠点を排除しながら、画像マップを改善することができます。
- このチュートリアルのサポートファイルをダウンロードする
SVGの利点
SVGには独自の内部ビューポートシステムがあるため、SVGは登録の問題に悩まされることはありません。ファイルが正しく設定されている限り、SVGドキュメント内のビットマップイメージとポリゴンポイントは、ナビゲーションでリンクされたホットスポットの整合性を維持しながら、相互にスケーリングおよび移動します。同時に、SVGは、スケーリングされたサイズに関係なく「完璧」なままであるベクター形式です。また、SVGとCSS3の機能を組み合わせて、生まれ変わった画像マップに強力なトランジション効果を作成することもできます。これは、従来のバージョンでは不可能でした。
これを説明するために、画像マップの基礎として地理マップを使用します。このような画像には、自由に利用できるという利点もあります。ウィキペディアには、RégisFreydのMapsIconプロジェクトと同様に、SVG形式のすべての国の地図があります。この例では、わかりやすくするために、採用したカナダの国の地図を西部の州に簡略化して使用します。
一般的に言って、SVGファイルへの複雑な変更は、ファイルをグラフィカルに操作できるベクターイラストツールに任せるのが最善です。今日、そのようなツールのほとんどはSVG形式をサポートしています。
コードのクリーンアップ
Illustratorからエクスポートすると、SVGファイルのコードは次のようになります。
？xml version = "1.0" encoding = "utf-8"？>！-ジェネレーター：Adobe Illustrator 15.0.0、SVGエクスポートプラグインSVGバージョン：6.00ビルド0）->！DOCTYPE svg PUBLIC "-// W3C // DTD SVG 1.1 // EN "" http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd "> svg version =" 1.1 "id =" Layer_1 "xmlns =" http： //www.w3.org/2000/svg "xmlns：xlink =" http://www.w3.org/1999/xlink "x =" 0px "y =" 0px "width =" 560.972px "height =" 400.48px "viewBox ="-4.872 578.6 560.972 400.48 "enable-background =" new -4.872 578.6 560.972 400.48 "xml：space =" preserve "> g id =" Canada "transform =" translate（-959.79,0.708441） "> path id = "CA-AB" fill = "＃D3D3D3" d = "M1321.652,944……/ g> / svg>
コードをクリーンアップするのは簡単です。コメント、プロローグ、Doctype、および不要な属性を削除します。これにより、コードは次のようになります。
svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns：xlink = http：//www.w3.org/1999/xlink viewBox = "-4.872 578.6 560.972 400.48"> g id = "Canada" transform = "translate（-959.79,0.708441）"> path id = "CA-AB" d = "M1321.652,944…/ g> / svg>
そうすれば、コードにリンクや画像を追加するのが簡単になります。
SVGシェイプのリンク
SVGのリンクはHTMLでも同じように記述されますが、href属性にxlinkプレフィックスが追加されています。
a xlink：href = "http://travelalberta.com"> path id = "CA-AB" d = "M1321.652,944…/ a>
各パスをリンクした後、ブラウザーでSVGファイルを確認します。アルバータ州の正確なアウトラインが、関連付けられたリンクのホットスポット領域になり、ドキュメントとビューポートウィンドウに合わせて拡大縮小されます。
SVGをWebページに統合する
インタラクティブSVGをWebページに統合するには、オブジェクト、iframeとして、またはページに直接追加されたコードを使用する方法がいくつかあります。後者を使用します。編集したSVGコードを次のようにコピーして貼り付けます。
body> h1> Imagemaps Redux / h1> svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns：xlink = http：//www.w3.org/1999/xlink viewBox = "-4.872 578.6 560.972 400.48"> g id = "Canada" transform = "translate（-959.79,0.708441）"> path id = "CA-AB" d = "M1321.652,944…/ g> / svg>…/本体>
現在、SVGドキュメントはビューポートのスペース全体を占めており、パスは黒で塗りつぶされています。リンクされた領域の双方向性を追加しながら、それを変更しましょう。ホストHTMLドキュメントの埋め込みスタイル、またはドキュメントにリンクされたスタイルシートに、次を追加します。
svg {高さ：50vw; }パス{塗りつぶし：＃d3d3d3;遷移：.6s塗りつぶし; } path：hover {fill：#eee; }
SVGファイルの下にHTMLコンテンツがある場合、それが合理的に予想されるよりもさらに押し下げられていることに気付くでしょう。 SVGをレスポンシブにすることで、それを解決できます。現在、SVGマップはホバー効果のある単純な画像マップとして機能します。パスのベクトルポイントは、マップ上にホットスポットを自動的に作成し、開発時間を大幅に節約します。また、パスのベクトルポイントは、ブラウザウィンドウに合わせて拡大縮小され、マップの応答性を高めます。 SVGは自動的にアルファマスクされるため、マップのグラフィック品質を妨げることなく、画像マップの背後にコンテンツを含めることができます。
マウスオーバー中にフェードインする各マップ領域内にクリップされた写真を追加することで、マップのビジュアルを向上させることができます。 Illustratorに画像を配置するのがおそらく最も簡単ですが、手作業でコーディングしても同じ結果が得られます。写真を適切な州の前に拡大縮小して配置し、各画像がその州を完全にカバーしていることを確認します。結果をエクスポートした後、クリーンアップ操作を繰り返し、次の手順を実行します。
- それぞれが一意のID値を持つclipPath要素でパスを囲みます。
- 各ビットマップ画像は、関連付けられたclipPath要素の後に配置することをお勧めします。
- clip-path属性を使用して、clipPath要素のIDを参照します（スペルが異なることに注意してください）。
アルバータ州の形状の周りのコードは次のようになります。
xlink：href = "http://travelalberta.com/"> clipPath id = "alberta-clipper"> path id = "CA-AB" d = "M1932…" /> / clipPath> image clip-path = " url（＃alberta-clipper） "width =" 1024 "height =" 768 "xlink：href =" crowsnest-pass.webp "x =" 1300 "y =" 150 "> / image> / a>
画像にclip-path属性を適用する前に、変換属性を削除した後、xとyの値を高さと幅とともに変更して、各画像の位置を手動で再調整して正しい位置に配置する必要がある場合があります。 Illustratorが適用されます。
アクセシビリティの追加
現在のSVG仕様はアクセシビリティを強力にサポートしていませんが、適切なタイトル、アクセスキー、ARIAロール属性を追加することで改善できます。
xlink：href = "http://travelalberta.com/" title = "Alberta" accesskey = "a"> clipPath id = "alberta-clipper"> path id = "CA-AB" d = "M1932…/ clipPath > image clip-path = "url（＃alberta-clipper）" width = "1024" height = "768" xlink：href = "crowsnest-pass.webp" x = "1300" y = "150" role = "image "title ="クロウスネストパス "> /画像> / a>
アニメーションの追加
SVG画像マップは、ホバー時にクリップされたビットマップ画像を遷移することで改善できます。
svg {高さ：50vw; }画像{不透明度：0.5;遷移：1秒の不透明度; } a：ホバー画像{不透明度：1; }
SVGは、最新のすべてのブラウザーとモバイルプラットフォームで非常に優れたサポートを提供し、従来のHTMLおよびJavaScriptソリューションの強力な代替手段を提供します。 Internet Explorerに関しては、サポートに少し問題があります。バージョン9以降のみがベクター形式を表示しますが、条件付きコメントまたはJavaScriptを使用して、古いMicrosoftブラウザーをサポートするコードをいつでも記述できます。
SVGをレスポンシブにする
無限にスケーラブルにすることを目的としたフォーマットの場合、WebページでSVGをレスポンシブにするタスクが非常に難しい場合があるのは皮肉なことです。 SVG画像をインライン画像としてページに追加する場合は、ビットマップとまったく同じ方法でレスポンシブにすることができます。
img src = "monkey.svg" alt = "Monkey face" style = "width：100％; height：auto;">
ただし、インラインSVG画像はインタラクティブ機能をサポートしないため、このチュートリアルで使用する画像マップにこのアプローチを使用することはできません。代わりに、SVGコードをページに直接埋め込む必要があります。記事で提案するクリーンアップされたコードを使用すると、埋め込まれた画像マップは応答しますが、図の上下に大きな垂直方向のギャップが表示されます。このギャップを取り除くには、次の手順を実行します。
01. SVGコードにpreserveAspectRatio属性を追加し、それをdivで囲みます。
div> svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 580 560 400" prepareAspectRatio = "xMinYMin meet"> .. / svg> / div>
02. 次のCSSをページに追加します。
.svg-wrapper {display：inline-block;位置：相対;幅：100％;パディングボトム：100％;垂直整列：中央; } .svg-wrapper svg {display：inline-block;位置：絶対;上：0;左：0; }
絶対位置と相対位置のこの組み合わせとパディングボトムは、応答性の高い「ウィンドウ」内でSVG描画を常に維持します。パディングは、SVGイラストのアスペクト比を表します。padding-bottom：100％は、SVGファイルの幅が高さと同じであると想定しています。背の高い図面または幅の広い図面の場合は、パディングボトムの値をそれぞれ増減します。テクニックのバリエーションを使用して、埋め込まれたYouTubeビデオやGoogleマップなどのサードパーティのコンテンツを、Webページでもレスポンシブにすることができます。
言葉： ダドリーストーリー
この記事はもともとネットマガジン249号に掲載されました。
