SVG <a> Element

Use SVG anchor elements ( <a>) to define a hyperlink. The SVG <a> element is used to create links in SVG images, and SVG links work just like HTML links.

Simple example:

<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>

This is the result image:

You can also-Set the attribute xlink:show on <a> to new or replace to determine whether the content pointed to by the link should be displayed in a new window or replace the content of the existing window.

Please note that if you use replace and display SVG images in an iframe, the iframe will be the target of the link, not the browser window. If you want the browser window instead of the target window iframe, please use the _top property value of the target attribute.

You can also set the target attribute to inform the browser to open the link in a specific frame or a specific window. Just like the properties of links in targetHTML (at least in theory). Please note that browsers interpret the values of the properties in different ways. For more detailed information, please refer to the last part of this page.

Graphics as links

Graphics can also be used as links. All you need to do is use the link for the SVG shape as <a> and </a> tag links. This is an example using a rectangle instead of text as a link:

<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>

This is the result image: