From http://www.w3schools.com (Copyright Refsnes Data)
Complete SVG Reference
The SVG a element is used to create a hyperlink.
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> |
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> |
Complete SVG Reference
From http://www.w3schools.com (Copyright Refsnes Data)