Links inside SVG not working about barba HOT 5 CLOSED

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.

from barba.

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

from barba.

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

from barba.

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

from barba.

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.

from barba.