javascript - JavaScript操作のために外部SVGをHTMLに埋め込む

Question

地理的な地域を示すSVG画像があります。 http://upload.wikimedia.org/wikipedia/commons/7/71/Nederland_gemeenten_2009.svg

SVG画像をWebページに表示し、JavaScriptとCSSの組み合わせを使用して画像を操作したいと思います。（つまり、領域のクリックを検出し、領域に異なる背景色を設定します）。

この質問がStackOverflowで何度か聞かれることは知っていますが、さらに作業するための完全なコードサンプルを見つけることができません。jQueryやプラグインなどのJavaScriptパッケージに関する推奨事項は大歓迎です。

score 107 · Accepted Answer

質問に対する私の理解では、解決すべきさまざまな側面があるということです。

インタラクション用の画像を準備する方法
ページに画像を埋め込む方法
SVG で CSS を使用する方法
インタラクションに JavaScript を使用する方法

画像の準備

まず、画像をクリーンアップすることをお勧めします。sodipodi:Inkscape は、と名前空間の要素と属性、およびinkscape:反復的および/または冗長なスタイル属性を含む、必要のないすべての種類のものをそこに残します。それを削除する必要はありませんが、帯域幅/読み込み時間を節約できます。また、CSS スタイルシートを使用する場合は、スタイル属性が邪魔になります。

サンプルファイルでは、同じスタイル属性が 472 回あります。それらをすべて削除し、同等の CSS ルールを一度作成します。

自治体に関する情報をマークアップに追加することもできます。たとえば、自治体を表す各パスの ID をその名前に従って変更できます。data-*この目的で属性を使用することもできます。後者には、スペースを使用できるという利点があります。これが対話、特に CSS でどのように役立つかについては、以下を参照してください。

画像の埋め込み

特に CSS/JavaScript を操作する場合は、SVG インラインを使用することをお勧めします。つまり、SVG マークアップを HTML に追加するか、Ajax を使用して読み込んで挿入するだけです。後者には、周囲のページの読み込みが速くなり、応答性が向上するという利点があります.

インライン SVG 要素の例:

<div id="svgContainer">
  <!-- This is an HTML div, and inside goes the SVG -->
  <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
    <circle r="50" cx="50" cy="50" fill="green"/>
  </svg>
</div>

Ajax を使用して SVG をロードする方法の簡単な例:

xhr = new XMLHttpRequest();
xhr.open("GET","my.svg",false);
// Following line is just to be on the safe side;
// not needed if your server delivers SVG with correct MIME type
xhr.overrideMimeType("image/svg+xml");
xhr.onload = function(e) {
  // You might also want to check for xhr.readyState/xhr.status here
  document.getElementById("svgContainer")
    .appendChild(xhr.responseXML.documentElement);
};
xhr.send("");

CSSの使い方

SVG は、HTML と同じようにスタイルを設定できます。もちろん、SVG にはfill-opacityやなどの独自のプロパティセットがあり、などstroke-dasharrayの多くの HTML のプロパティはサポートされていません。しかし、セレクターのメカニズムは 100% 同じです。marginposition

<style>要素内または外部 CSS ファイルのいずれかで、インライン SVG の CSS と HTML の CSS を混在させることができます。<style>SVG コードとstyle属性内で要素を使用することもできます。

SVG 要素に意味のある ID またはdata-*属性を与えたと仮定すると、CSS を使用して地方自治体を強調表示する 2 つの方法は次のようになります。

#Bronckhorst, #Laarbeek {fill:red}

また

*[data-gemeente=Bronckhorst], *[data-gemeente=Laarbeek] {fill:red}

もちろん、それぞれの要素のスタイル属性を変更することもできます。プロパティは属性としてもサポートされています。つまり、のstyle="stroke-width:2"ように指定することもできますstroke-width="2"。属性と CSS の両方 (style 属性、style 要素、または外部スタイルシートのいずれかを使用) を使用して同じプロパティが設定されている場合、CSS は属性をオーバーライドします。

JavaScript インタラクション

少なくともプレーンなバニラ DOM を使用している限り、JavaScript の相互作用に関しては、基本的に HTML と SVG の間に違いはありません。つまり、のような HTML 固有の機能innerHTMLは SVG ではサポートされていません (つまり、はありませんinnerSVG)。しかし、SVG には独自のグラフィックス固有の DOM メソッドのセットがあります ( W3C 仕様を参照してください)。

注意すべきことの 1 つは、名前空間の操作です。すべての SVG 要素は SVG 名前空間にある必要があり、JavaScript を使用してそれらを作成する場合は、createElementNS()代わりに使用する必要がありcreateElement()ます。

var use = document.createElementNS("http://www.w3.org/2000/svg","use")

同様に、XLink 名前空間 (つまり ) の属性は、代わりにxlink:hrefを使用して操作する必要があります。setAttributeNS()setAttribute()

use.setAttributeNS("http://www.w3.org/1999/xlink","href","#foo")

jQuery などのライブラリは HTML 固有の機能に部分的に依存しているため、SVG を操作するときはそれらを避ける方が安全です。[編集: この回答を書いてから、状況が改善された可能性があります。jQuery のユーザーではないので、最近どのように機能するかはわかりません。] D3.jsのような SVG 固有のライブラリもあり、特定の目的に役立つ可能性があり、一見の価値があります。(単純に SVG 固有のライブラリと呼ぶとき、私は D3.js の不正を行っています。それはそれ以上のものだからです)。

onclick同様の属性と標準 DOMを使用できますaddEventListener()。<svg>JavaScript イベントを使用する非常に単純な例は、ユーザーがクリックした自治体の名前を報告する要素にイベントリスナーを追加することです。

document.getElementsByTagName("svg")[0]
  .addEventListener("click",function(evt){
    alert(evt.target.getAttribute("data-gemeente"))
  },
  false)

補足: ツールチップtitleHTML で属性を使用して得られるのと同じ効果が<title>、SVG で要素を使用して実現できます。<title>要素を SVG 要素内に配置してホバーすると、<title>要素のコンテンツを含むツールチップが表示されます。

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
  <rect width="100" height="100">
    <title>test</title>
  </rect>
</svg>

score 8 · Accepted Answer

記録のために（これが1年遅れることを知っています）、私はSnapSVGがSVG操作に最適であることを発見しました。ラファエルの背後にいた同じ男:

http://snapsvg.io

javascript - JavaScript操作のために外部SVGをHTMLに埋め込む

2 に答える 2

Related

Reference