title: Getting anchor element within SVG
body: <p>I have an svg on my site for selecting states in the US. The format is:</p>
  
  <pre><code>&lt;svg...&gt;
    &lt;a xlink:href="..."&gt;
      &lt;polygon ...&gt;&lt;title&gt;{stateName}&lt;/title&gt;&lt;/polygon&gt;
    &lt;/a&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>After several hours of headaches trying to figure out why clicking the links caused issues with other scripts on the same site, I narrowed down the issue to the event not being passed to those functions when the target was the anchor in the svg.</p>
  
  <p>So I created a separate page without those other scripts and experimented by creating the following function:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  (function($){
    $(document).ready(function(){
        $('svg a').click(function(event){
            if(event.target.tagName == 'polygon'){
                var target = $(this).parent();
                alert('target: ' + dump(target));
            }else{
                alert('event: ' + dump(event.target));
            }
        });
    });
  })(jQuery);
  &lt;/script&gt;
  </code></pre>
  
  <p>Note: The dump() function is a custom function that outputs the contents of objects and arrays.</p>
  
  <p>My first version of this code just output the event.target.tagName which was always "polygon" even though the object I'm binding the click to is the anchor. So I modified it to get the polygon's parent but that returns the svg. It's like the anchor doesn't exist.</p>
  
  <p>Why is it that I cannot seem that the event for that function doesn't contain any reference to the anchor? How can I get this to behave like it would if the anchor was inside a div instead?</p>
  
  <p>I tried a jQuery SVG plugin but that did nothing.</p>
  
  <p>TL;DR / Clarification
  The issue isn't that the anchor isn't working, clicking it will take you to the page defined in xlink:href. But any jQuery code bound to click events that are triggered when clicking these anchors within the svg either come through with the event as undefined or not containing the expected anchor object data.</p>
  
  <p>How can I get the appropriate event object for these anchors?</p>
  
  <p>Edit: Finally got jsfiddle to load: <a href="http://jsfiddle.net/fja4Lt0L/" rel="nofollow">http://jsfiddle.net/fja4Lt0L/</a></p>
  
  <p>Explanation of current behavior in different browsers:</p>
  
  <ul>
  <li>FireFox: issue as described</li>
  <li>Chrome/Safari: does nothing at all</li>
  <li>IE: follows the link regardless of the script attached to the click event</li>
  </ul>
  
  <p>None of those are behaviors expected of the script or intended by the coder.</p>