From http://www.w3schools.com (Copyright Refsnes Data)

SVG a Element


SVG Reference Complete SVG Reference

Definition and Usage

The SVG a element is used to create a hyperlink.


Example 1

This example shows how to add an a element to a rectangle. The rectangle will act as a hyperlink.

Copy the following code into Notepad and save the file as "a_1.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href="http://www.w3schools.com" target="_blank">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.9"/>
</a>

</svg>

View example

Example 2

This example uses a JavaScript to create an a element when the user clicks on a circle.

Copy the following code into Notepad and save the file as "a_2.svg". Place the file in your Web directory:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<script>
function create_a(evt)
{
var SVGDoc=evt.getTarget().getOwnerDocument();
var txt=SVGDoc.getElementById("txt");
var link=SVGDoc.createElement("a");
var text_node=SVGDoc.createTextNode("LINK");

link.setAttributeNS(
"http://www.w3.org/1999/xlink",
"xlink:href",
"http://www.w3schools.com");

link.appendChild(text_node);
txt.appendChild(link);
} </script>

<text id="txt" x="10" y="10">
Click on the circle to create a ....</text>
<circle cx="20" cy="40" r="1.5em" style="fill:blue"
onclick="create_a(evt)"/>

</svg>

View example


SVG Reference Complete SVG Reference

From http://www.w3schools.com (Copyright Refsnes Data)