$link widget inside an svg element.

[Matthew Lauber]

Anyone have a easy solution to using the $link element inside a <svg>?  Attached I've got my testing example.  An empty <a> tag works just fine, but using <$link> in its place causes the bow not to render.  I't possible I've missed something obvious, but I've been banging my head against the wall.

Thanks, 

Matt Lauber

[Eric Shulman]

On Thursday, March 10, 2016 at 9:34:22 AM UTC-8, Matthew Lauber wrote:

Anyone have a easy solution to using the $link element inside a <svg>?  Attached I've got my testing example.  An empty <a> tag works just fine, but using <$link> in its place causes the bow not to render.  I't possible I've missed something obvious, but I've been banging my head against the wall.

Your svg definitions have two *nested* <svg>...</svg> elements.  You have:

<svg ...>
   <a>
      <svg ...>
      ...
      </svg>
   </a>
</svg>

and

<svg ...>
   <$link ...>
      <svg ...>
      ...
      </svg>
   </$link>
</svg>

If you remove the outer <svg></svg> pair, the $link widget and the <a> element work as expected (i.e., creates a link to a tiddler or an href, respectively).  It seems the the only thing the outer <svg> element adds is width="100%" height="100%", but you should be able to simply move those attributes to the inner <svg> so the image will appear the same size as before.

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

InsideTiddlyWiki: The Missing Manuals

[Matthew Lauber]

I'm actually using those attributes on the outer element to position the inner element x% and y% releative to the outer svg.  However, I will experiment if there's some way I can otherwise position them.

[Hegart Dmishiv]

Hi Matthew,

Couldn't you just encapsulate the inner <svg> elements in an outer <div> set to 100% size, and have your inner <svg> work relative to that?

Hegart.