Merge pull request #394 from Altiva/master

Correctly handle clicks from svg links

index.js

@@ -578,10 +578,15 @@
     // ensure link
     // use shadow dom when available
     var el = e.path ? e.path[0] : e.target;
-    while (el && 'A' !== el.nodeName) el = el.parentNode;
-    if (!el || 'A' !== el.nodeName) return;
 
+    // continue ensure link 
+    // el.nodeName for svg links are 'a' instead of 'A'
+    while (el && 'A' !== el.nodeName.toUpperCase()) el = el.parentNode;
+    if (!el || 'A' !== el.nodeName.toUpperCase()) return;
 
+    // check if link is inside an svg
+    // in this case, both href and target are always inside an object
+    var svg = (typeof el.href === 'object') && el.href.constructor.name === 'SVGAnimatedString';
 
     // Ignore if tag has
     // 1. "download" attribute
@@ -592,21 +597,22 @@
     var link = el.getAttribute('href');
     if (!hashbang && el.pathname === location.pathname && (el.hash || '#' === link)) return;
 
-
-
     // Check for mailto: in the href
     if (link && link.indexOf('mailto:') > -1) return;
 
     // check target
-    if (el.target) return;
+    // svg target is an object and its desired value is in .baseVal property
+    if (svg ? el.target.baseVal : el.target) return;
 
     // x-origin
-    if (!sameOrigin(el.href)) return;
-
-
+    // note: svg links that are not relative don't call click events (and skip page.js)
+    // consequently, all svg links tested inside page.js are relative and in the same origin
+    if (!svg && !sameOrigin(el.href)) return;
 
     // rebuild path
-    var path = el.pathname + el.search + (el.hash || '');
+    // There aren't .pathname and .search properties in svg links, so we use href
+    // Also, svg href is an object and its desired value is in .baseVal property
+    var path = svg ? el.href.baseVal : (el.pathname + el.search + (el.hash || ''));
 
     path = path[0] !== '/' ? '/' + path : path;
 

page.js

@@ -553,8 +553,13 @@
     // ensure link
     // use shadow dom when available
     var el = e.path ? e.path[0] : e.target;
-    while (el && 'A' !== el.nodeName) el = el.parentNode;
-    if (!el || 'A' !== el.nodeName) return;
+
+    // continue ensure link | el.nodeName for svg links are 'a' instead of 'A' and fail when testing only in the latter
+    while (el && ( 'A' !== el.nodeName && 'a' !== el.nodeName ) ) el = el.parentNode;
+    if (!el || ( 'A' !== el.nodeName && 'a' !== el.nodeName ) ) return;
+
+    // check if link is inside an svg | in this case, both href and target are always inside an object
+    var svg = ( typeof el.href === 'object' ) && el.href.constructor.name === 'SVGAnimatedString';
 
 
 
@@ -573,15 +578,20 @@
     if (link && link.indexOf('mailto:') > -1) return;
 
     // check target
-    if (el.target) return;
+    // svg target is an object and its desired value is in .baseVal property
+    if ( svg ? el.target.baseVal : el.target ) return;
 
     // x-origin
-    if (!sameOrigin(el.href)) return;
+    // note: svg links that are not relative don't call click events (and skip page.js)
+    // consequently, all svg links tested inside page.js are relative and in the same origin
+    if ( !svg && !sameOrigin( el.href )) return;
 
 
 
     // rebuild path
-    var path = el.pathname + el.search + (el.hash || '');
+    // There aren't .pathname and .search properties in svg links, so we use href
+    // Also, svg href is an object and its desired value is in .baseVal property
+    var path = svg ? el.href.baseVal : ( el.pathname + el.search + (el.hash || '') );
 
     path = path[0] !== '/' ? '/' + path : path;