ハイパーリンクを設定
SVGでハイパーリンクを設定するには、a要素を使用します。
HTMLのa要素と同じ機能を持ちます。
また、形状に沿った部分だけにリンクが適用されます。
（text要素によって描画されたテキストはHTMLのa要素と同様にテキスト全体がリンクとなります。）
構文
<a>
リンクとする要素
</a>属性
| 属性名 | 初期値 | 説明 |
|---|---|---|
| xlink:href | 遷移する先のパス。 SVG 1.1の場合はこの属性を使用し、SVG 2からは非推奨となるのでhref属性を使用する。 |
|
| href | 遷移する先のパス。 SVG 2からはこの属性を使用し、SVG 1.1まではxlink:href属性を使用する。 |
|
| target | _self | 遷移の方法。 SVG 2からはこの属性を使用し、SVG 1.1まではxlink:href属性を使用する。 |
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 150" width="200" height="150">
<a xlink:href="sample.html" target="_blank">
<text x="70" y="100" font-size="20">テキスト</text>
</a>
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 150" width="200" height="150">
<a xlink:href="sample.html" target="_blank">
<circle cx="100" cy="75" r="50" fill="none" stroke="red" stroke-width="10" />
</a>
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 150" width="200" height="150">
<a xlink:href="sample.html" target="_blank">
<circle cx="100" cy="75" r="50" fill="none" stroke="red" stroke-width="10" />
<rect width="50" height="40" x="75" y="55" />
</a>
</svg>