Links inside SVG not working

[joshuabeyer]

Hi there!

Great library. I am currently using it in production and love the simplicity in comparison to a SPA framework.

However there is one thing I can't get Barba.js to work with:
I have some links inside inline SVG containers. On these links the browser default behaviour applies and Barba.js doesn't seem to run.
If I take these links out of the SVG container (for testing purposes only), everything works just fine. But unfortunately I need them inside the SVG.

Example markup:

<svg version="1.1" class="scene" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 758 648" >
    <a xlink:href="example.html" class="scene__link">
        <polygon class="scene__area" points="... "/>
        <path class="scene__shape" d="..."/>
    </a>
</svg>

Any help would be greatly appreciated.

[luruke]

Hi there, yes, I guess xlink:href is not supported.
You might handle it manually, and use Barba.Pjax.goTo function.

I'll considering to support it natively on the next version

[joshuabeyer]

Thanks a lot, works like a charm.

For anyone interested in doing the same, here is my code:

$(".js-modal-link").click(function(e) {
  e.preventDefault();

  var url = $(this).attr("xlink:href");

  Barba.Pjax.goTo(url);
});

Simply apply the .js-modal-link class to all anchor tags inside your svg container and you're good to go.

[luruke]

Perfect @joshuabeyer ;
I'll make sure to add support to xlink:href in the next version.

[luruke]

Added support for xlink:href in the new version.
bff3842

[tortilaman]

This issue seems to be popping up for me again unfortunately. I've done all I can to try and resolve it, but it just doesn't seem to be recognizing clicks inside the SVG at all, so it never even traverses up the dom to find the A tag that has the xlink:href value in it when the svg is clicked (at least according to breakpoints in developer tools). Relevant code:

HTML:

<div class="profileSvg-wrapper">
  <svg id="profile" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 635.29 561.25">
    <defs>
      <style>[...]</style>
    </defs>
    <title>success-profile</title>
    <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/profile/business" href="/profile/business" class="js-modal-link">
      <g id="Business">
        <polygon id="BG-Business" class="cls-1" points="190.59 449 190.58 449 190.58 449 254.11 561.25 381.17 561.25 444.7 449 190.59 449"></polygon>
        <text class="cls-4" transform="translate(249.76 513.08) scale(0.98 1)">B<tspan class="cls-5" x="19.05" y="0">U</tspan><tspan x="38.79" y="0">S</tspan><tspan class="cls-6" x="55.8" y="0">I</tspan><tspan class="cls-7" x="67.65" y="0">N</tspan><tspan class="cls-6" x="88.23" y="0">E</tspan><tspan class="cls-8" x="105.27" y="0">S</tspan><tspan class="cls-9" x="122" y="0">S</tspan></text>
      </g>
    </a>
    [...]
  </svg>
</div> 

JS:

document.addEventListener("DOMContentLoaded", function() {
  var lastElementClicked;
  Barba.Pjax.init();

  Barba.Dispatcher.on("linkClicked", function(el) {
    lastElementClicked = el;
  });

  var MyTransition = Barba.BaseTransition.extend({
    start: function() {
      Promise
        .all([this.newContainerLoading, this.scrollTop()])
        .then(this.cardSlideUp.bind(this));
    },

    scrollTop: function() {
      [...]
      return deferred.promise;
    },

    cardSlideUp: function() {
      [...]
    }
  });

  Barba.Pjax.getTransition = function() {
    return MyTransition;
  };
}); 

Didn't want this to be a wall of text, but that's kind of what it's become unfortunately. Iet me know if there's more I can do to resolve this.