Streaming live at 10am (PST)

Disable click hijacking with SVG links to named anchors?


#1

Hi all,

Is it possible to disable Webflow’s click hijacking in specific circumstances? Specifically, when a link is clicked, I’d like to handle the click directly without Webflow’s JS being involved at all. I think I’ve found a bug in how Webflow’s click hijacking handles anchor tag navigation from SVGs, which is a showstopper for this particular site.

Here’s the problem that led me here.

I’ve been helping someone build a Webflow site that involves lots of complex embedded SVGs. Many of those SVGs contain links to named anchors in the same page. E.g.,

<svg><a xlink:href="#g"><path ... /></a></svg>

… when clicked this should take the user to <div id='g' /> elsewhere in the page.

In Chrome, clicking such links trigger a console error this.href.split is not a function, but recovers and eventually does the right thing. The URL gets #g appended to it, and the browser jerks to that location.

In Safari, clicking the link gives the same error, but there is no recovery.

The offending line is in the CDN’ed Webflow Javascript file. this.href is an SVGAnimatedString, which doesn’t have the split function, which causes the error message. I’m guessing that when a ‘normal’ link is clicked, this.href is a plain old string.

To reproduce, go to: http://april-johnsons-first-project.webflow.io/sections/structural-cross-sections and (once the big SVG has loaded at the top) click on any of the links, then check the console.


#2

Hello @Gabe_Johnson

Maybe @vincent can help us :smile:


#3

Sorry no, I’m discovering a field here. I’m just starting to understand the struggle I had once with links inside of SVGs.


#4

SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href .


#5

Awesome, thanks for the replies. I’ll give it a shot.


#6

Unfortunately, swapping out the xlink:href for href did not do the trick.

I realize that it is pretty edgecase-y, but I think this is just a bug in the webflow code.

I sidestepped the problem by using an onclick handler in the SVG elements and added a little JS to the relevant pages.

Thanks for the replies at any rate!