How to link from SVG?
Asked Answered
M

1

6

What I tried is this

<a xlink:target="http://ponyoverflow.com">
  <text class="text" x="20" y="718" text-anchor="start">Mail Order Ponies</text>
</a>

and variations with href and type="simple".

The link text appears, but the link is not clickable. I tried Firefox 3.5.5, Chromium, Inkscape and GNOME Image Viewer.

Is there anything wrong with the syntax and if not is there any application that supports links in SVG?

Melodeemelodeon answered 29/11, 2009 at 18:15 Comment(1)
As I understood, xlink:target is the same as HTMLs @target, like the infamous target="_blank". Erik's solution works, however, in any case I've seen (as it is the canonical way to do it ;-) )Hemichordate
L
15

Try this:

<a xlink:href="http://ponyoverflow.com">
  <text class="text" x="20" y="718" text-anchor="start">Mail Order Ponies</text>
</a>

...and make sure you have an attribute xmlns:xlink="http://www.w3.org/1999/xlink" on the svg root element.

Loveland answered 30/11, 2009 at 12:25 Comment(2)
Thanks Eric, works as you suggested. I tried the href version, but only when generated from javascript, which still doesn't work. I verified that the javascript produces exactly the above output (saved the document with) firefox. My workaround for now is to hardcode the link and move it to the proper position dynamically. If have an idea why the generated link isn't clickable I'd like to know.?Melodeemelodeon
@Erik Hi Erik, I am working with d3 and would like to know how do I set the attribute xmlns:xlink in svg. Here's my question http://stackoverflow.com/questions/19987032/adding-attribute-xmlnsxlink-to-svg-using-d3Surety

© 2022 - 2024 — McMap. All rights reserved.