Links inside SVG have undefined events I have a problem with a site I'm developing in which I have a US map with each state as a polygon defined in an svg. Each of those polygons is wrapped in a link so users can click on a state to be taken to information about that state.

Code layout:
&lt;svg...>
  &lt;a xlink:href="...">
    &lt;polygon ...>&lt;title>{stateName}&lt;/title>&lt;/polygon>
  &lt;/a>
&lt;/svg>


The problem I'm having is when someone clicks one of these links I get several errors:
TypeError: this.href.match is not a function in googleanalytics.js line 36, col 66
    ...rupal.settings.googleanalytics.trackOutbound &amp;&amp; this.href.match(/^\w+:///i))
TypeError: target.protocol is undefined in overlay-parent.js line 575
    if (href != undefined &amp;&amp; href != '' &amp;&amp; target.protocol.match(/^https?:/)) {


After some experimentation I narrowed it down to those functions having undefined events.

The googleanalytics.js function is:

...
$(document.body).bind("mousedown keyup touchstart", function(event) {
...


The overlay-parent.js function is:

...
Drupal.overlay.eventhandlerOverrideLink = function (event) {
...


I assume this has something to do with the links being nested in the svg for some reason but I can't find any good information on why or how to get around that.

I tried using a jquery.svg.js plugin but that had no impact.

Using:
Drupal 7.34
jQuery 1.10.2 (via ajax.googleapis.com)
Google Analytics 7.x-2.1 (googleanalytics.js)
jQuery Update 7.x-2.4 (replace/misc/1.9/overlay-parent.js)

If any other info is needed to help figure this out let me know.

Thanks in advance for any help you can provide!
The issue is the way the google analytics module tracks clicks.  It adds mousedown, keyup, and touchstart events to the body and tries to match the clicked position the the closest anchor.  When it encounters a click on an SVG element it gets confused and is not able to properly match the closest anchor.

There are a couple options to remedy this:


Using :after on your anchors to create a block that covers up the SVG elements.
Using pointer-events: none on all SVG elements inside your anchor.
Turn off click tracking in your Google Analytics settings.
Unbind click tracking on your map page only with something like $('body.mymappage').unbind()
Manually patch the GA module:


Change the line (googleanalytics.js):

$(event.target).closest("a,area").each(function() {


to: 

$(event.target).closest("a,area").not(".svg-anchor").each(function() {


The first 2 options are documented here, and a codepen example fix is here.