web link in svg

Question

Hi all. I need to have a linked text inside a svg graph. Here is what I did

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="138pt" height="188pt" viewBox="0.00 0.00 138.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/1999/xhtml"&gt;
  <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
    <g id="node5" class="node"><title>EQ2</title>
      <ellipse style="fill:none;stroke:black;" cx="65" cy="-18" rx="29.1851" ry="18"/>
      <text text-anchor="middle" x="65" y="-13.9" style="font-family:Times New Roman;font-size:14.00;">foo <html:a href="http://google.com"&gt;bar&lt;/html:a&gt;&lt;/text&gt;
    </g>
  </g>
</svg>

I expected the namespace for html and the html:a tag would result in a proper handling of the bar text. but what I get is that bar is not displayed. As suggested in an answer, I can use the svg:a element, but I don't understand why my approach does not work. I would expect the browser HTML renderer to kick in and handle that part of the DOM tree.

Answer 1

You want <a xlink:href="http://example.org/"&gt;. It's an SVG element too, you see.

Re: XHTML link. I believe a better question is, why would you expect it to work, or need it to? SVG has its own perfectly suitable link element, which is widely implemented and well supported.

As has been suggested in a comment, it has to do with dropping out of an SVG rendering context; this may or may not be the case, more likely it's a matter implementation-defined behaviour. Even so, it shouldn't be thought of as likely to work in any future implementation, especially considering the presence of a native tag with identical functionality.