4

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?

rmoestl
  • 3,059
  • 5
  • 24
  • 38
Ali Samii
  • 1,672
  • 4
  • 28
  • 49
  • I presume you're using HTML5? If yes, I tend to say that the **xlink** namespace should be known by default. See [HTML5 spec](http://www.w3.org/TR/2011/WD-html5-20110405/namespaces.html). Maybe your document is not recognized as HTML5? – rmoestl Mar 21 '14 at 08:34

1 Answers1

10

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">
Robert Longson
  • 118,664
  • 26
  • 252
  • 242