Getting links to work in SVG with Iron router

help
1

Hi All,

Does anyone know how to get links in SVG (i.e. tags surrounding an element) working with iron router? Is iron router even capable of handling xlink:href links?

I’m using blaze to build out SVG diagrams dynamically with embedded links. So far I’ve been using foreignobjects to host my buttons and links and everything works correctly in terms of iron router working properly.

However when I try to make parts of the raw SVG clickable i get errors. I’ve been following the directions from here: https://alligator.io/svg/hyperlinks-svg/

Also see others having the same issue: https://stackoverflow.com/questions/31010608/is-there-a-support-for-xmlnshref-i-iron-router-for-meteor

Example link and associated error message below:

<a xlink:href="/interaction/{{_id}}">
          <circle cx="280" cy="{{math.mulOffset @index 140 60}}" r="5" stroke="red" stroke-width="3" fill="none"/>
        </a>

Error message from console:

Uncaught TypeError: path.replace is not a function
    at onClickHandler (iron_location.js?hash=f238699f01a22e86c2e94e7610ed7c8ed9dd4938:305)
    at SVGAElement.fireOnClick (iron_location.js?hash=f238699f01a22e86c2e94e7610ed7c8ed9dd4938:267)
    at HTMLDocument.dispatch (modules.js?hash=4db8252dc6c4b796cc19f3d843ed09f6b3e4f763:13136)
    at HTMLDocument.elemData.handle (modules.js?hash=4db8252dc6c4b796cc19f3d843ed09f6b3e4f763:12944)
2

I haven’t tested this at all, but have you tried attaching an event handler to the link element, preventing the default action and routing programmatically from there on?

3

as said, this works, thanks…

Template.home.events({

  'click a'(e){
    e.preventDefault();
    e.stopPropagation();
    Router.go(e.currentTarget.getAttributeNS('http://www.w3.org/1999/xlink', 'href'))
  }
});