SVG 教程

SVG要素

SVG <a> 要素

SVGのアンカー要素（<a>）を使用してハイパーリンクを定義します。SVG <a>要素はSVG画像内にリンクを作成するために使用され、SVGリンクはHTMLリンクのように動作します。

簡単な例：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a　xlink:href="/svg/svg-tutorial.html">
　　　　　　　　<text　x="10"　y="20">/svg/svg-tutorial.html</text>
　　　　</a>
　　　　<a　xlink:href="/svg/svg-tutorial.html"　xlink:show="new">
　　　　　　　　<text　x="10"　y="40">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="new")</text>
　　　　</a>
　　　　<a　xlink:href="/svg/svg-tutorial.html"　xlink:show="replace">
　　　　　　　　<text　x="10"　y="60">/svg/svg-tutorial.html
　　　　　　　　　(xlink:show="replace")</text>
　　　　</a>
　　　　<a　xlink:href="/svg/svg-tutorial.html"　target="_blank">
　　　　　　　　<text　x="10"　y="80">m/svg/svg-tutorial.html
　　　　　　　　　(target="_blank")</text>
　　　　</a>
　　　　<a　xlink:href="/svg/svg-tutorial.html"　target="_top">
　　　　　　　　<text　x="10"　y="100">/svg/svg-tutorial.html
　　　　　　　　　(target="_top")</text>
　　　　</a>
</svg>

テストを見て‹/›

これは結果画像です：

以下のように-element xlink:showの属性を<a>にnewまたはreplaceを設定することで、リンク先のコンテンツが新しいウィンドウで表示されるべきか、既存のウィンドウのコンテンツを置き換えるべきかを判断します。

SVG画像iframeをreplaceおよび内で表示する場合、iframeがリンクのターゲットとなります。ブラウザのウィンドウではなくターゲットウィンドウiframeを使用したい場合は、target属性の値が_topの属性を使用してください。

target属性を設定することで、ブラウザが特定のフレームまたは特定のウィンドウでリンクを開くことを通知できます。targetHTMLのリンクの属性のように（少なくとも理論的には）です。ブラウザが属性の値を異なる方法で解釈することに注意してください。詳細については、このページの最後の部分を参照してください。

グラフはリンクとして使用されます

画像もリンクとして使用できます。必要なのは、SVG形状としてリンクする必要があるだけです<a>と</a>タグの間のリンクです。これはテキストではなく矩形を使用してリンクする例です：

例

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<a　xlink:href="/svg/index.html"　target="_top">
　　　　　　　　<rect　x="10"　y="20"　width="75"　height="30"
　　　　　　　　　　　　　　　　style="stroke:　#333366;　fill:　#6666cc"/>
　　　　</a>
　　　　
</svg>

テストを見て‹/›

これは結果画像です：

SVG <defs> 要素 SVG <textPath> 要素