Adding multiple links to an SVG object

Question

I am trying to get an SVG object (map of Europe) with 7 countries selected to be links to specific pages.

In my SVG file, I have wrapped each polygon or path that is supposed to be a link with this general syntax:

<a xlink:href="http://www.google.com">
    <polygon class="lebanon" id="lebanon2" points="249.1,157.2 249.8,157.4 251.7,157.3 252.3,156.1 253.1,156.1 253.9,154.7 254.4,153.1 255.5,152.5 256.1,152.5 256.7,152.2 256.3,151.3 256.4,149.7 255.4,149.2 254.8,147.9 252.4,147.8 252.4,148.1 251.6,148.3 251.3,152.5 250.3,154 249.3,155.4 249.3,157"/>
</a>

However, on page load, U get the following error:

This page contains the following errors:
    error on line 32 at column 15: Namespace prefix xlink for href on a is not defined
Below is a rendering of the page up to the first error.

How do I get this to work?

Answer 1

Your base <svg> tag needs to have the following namespace attributes. You presumably have the former but not the latter

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">