MobileRead Forums - View Single Post - How can hyperlinks be added inside SVG wrapper?

GrannyGrump · 03-03-2014, 12:02 AM

@DaleDe --thanks for the example.

Jellby's link had a nice easy little step-through tutorial. I was surprised to learn that my first effort was almost successful --- all I was missing was the "xlink" prefix to the "href" for the "a" tag. (Which was already defined in the svg tag for linking the image to be displayed.) And funnily enough, I already had the image link staring me right in the face!

Code:

<div class="svgdiv" id="z083">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMidYMid meet" 
width="98%" height="98%"  
 viewBox="0 0 533 900">

<image width="533" height="800" xlink:href="../Images/z083.jpg"/>

<text style="font-style:italic;font-size:20pt" text-anchor="middle" x="265" y="840">It Was a Magician’s Wand</text>

<a xlink:href="../Text/ch08.xhtml#srcz083">
<text style="font-style:normal;font-size:14pt" text-anchor="middle" x="265" y="870">[ A &gt; RETURN ]</text>
</a>

</svg>
</div>

I am a little intimidated by SVG, and I probably let myself get discouraged.
I've been using svg wrappers for quite a while, but in a copy-paste cookbook way, I didn't really understand what much of the svg tag code meant. Now I am beginning to understand it a bit.

Anyway, maybe this post will help some other poor soul trying to get a handle on this.

03-03-2014, 12:02 AM	#9
GrannyGrump Obsessively Dedicated... Posts: 3,233 Karma: 35158061 Join Date: May 2011 Location: PA {back in the usa!} Device: Sony PRS-T2, ADE on PC	@DaleDe --thanks for the example. Jellby's link had a nice easy little step-through tutorial. I was surprised to learn that my first effort was almost successful --- all I was missing was the "xlink" prefix to the "href" for the "a" tag. (Which was already defined in the svg tag for linking the image to be displayed.) And funnily enough, I already had the image link staring me right in the face! Code: <div class="svgdiv" id="z083"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" width="98%" height="98%" viewBox="0 0 533 900"> <image width="533" height="800" xlink:href="../Images/z083.jpg"/> <text style="font-style:italic;font-size:20pt" text-anchor="middle" x="265" y="840">It Was a Magician’s Wand</text> <a xlink:href="../Text/ch08.xhtml#srcz083"> <text style="font-style:normal;font-size:14pt" text-anchor="middle" x="265" y="870">[ A > RETURN ]</text> </a> </svg> </div> I am a little intimidated by SVG, and I probably let myself get discouraged. I've been using svg wrappers for quite a while, but in a copy-paste cookbook way, I didn't really understand what much of the svg tag code meant. Now I am beginning to understand it a bit. Anyway, maybe this post will help some other poor soul trying to get a handle on this. Last edited by GrannyGrump; 03-03-2014 at 12:15 AM.