0

I have to convert some SVG text to a working hyperlink. I have the following code (I've added the anchor tag):

<svg class="crocodoc-4Z7fb6 crocodoc-page-svg" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xml:space="preserve" width="720pt" height="547pt" viewBox="0 0 720 547">
<xhtml:link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<defs>
<image id="Image_35_3_4Z7fb6" width="176" height="243" xlink:href="images/35.png" />
<image id="Image_41_3_4Z7fb6" width="175" height="241" xlink:href="images/41.png" />
<image id="Image_37_3_4Z7fb6" width="176" height="243" xlink:href="images/37.png" />
<clipPath id="Clip_0_3_4Z7fb6"><path d="M0 547 l720 0 l0 -547.2 l-720 0 l0 547.2 " /></clipPath>
<image id="Image_39_3_4Z7fb6" width="176" height="243" xlink:href="images/39.png" />
</defs>
...
<a xlink:href="http://www.mylink.com" target="_blank"><text class="fh" font-size="12.96"
style="fill:#d52b1e"><tspan x="197.66" y="361.55"  
textLength="128.81"dx="0,-0.09,-0.09,-0.09,0,0,0,0,0.04,0,0,0,0,0,0.13,0,0,0,0.1,0">
www.mylink.com</tspan></text></a>
...
</svg>

The images are loaded fine, but the text which I have wrapped with the tag, is not clickable. Can anyone advise on what I am doing wrong here?

Nathan Power
  • 630
  • 1
  • 6
  • 14
  • 1
    It's clickable for me provided I add the missing space between the textLength and dx attributes i.e. textLength="128.81" dx="0,... – Robert Longson Sep 24 '13 at 19:41
  • You're right... it must be something in the markup I omitted causing it (the space you mentioned is present in the original). I'll have another look and post the full file if I can't figure it out. Thanks for the input. – Nathan Power Sep 24 '13 at 19:51

2 Answers2

0

The offender was a path tag at the end:

<path d="M0 547 l719.98 0 l0 -547.2 l-719.98 0 l0 547.2 z " style="stroke:#000000;
stroke-width:1.92;stroke-linejoin:round;"/>
</svg>

Once I removed the path tag (which I didn't need anyway) the link worked. Not sure exactly why, I'm guessing the path hides the clickable element somehow. Thanks to Robert Longson for the heads-up.

Nathan Power
  • 630
  • 1
  • 6
  • 14
0

If it helps, I did find a solution using jquery mobile. My project required jquery mobile, not the best, but it's a start!

// .map is the class for the link/svg/group/path/etc
$(".map").click(function () { 
            $.mobile.navigate("#map-viewer");
        });

Hope this helps someone!

Claudiordgz
  • 3,023
  • 1
  • 21
  • 48
kangaskahn
  • 38
  • 4