How can I remove an svg element from the taborder?

Question

In the following plunkr

I have 3 divs listed in order from top to bottom.

Problem

In Firefox: when I tab to each div, it does so after each keypress. This is the expected behavior I want to see: *

1. hit tab: dotted line is around div1

2. hit tab: dotted line is around div2

3. hit tab: dotted line is around div3

HOWEVER,

In Internet Explorer, it takes 2 keypresses of the tab key to move to the next div. It appears as if the browser wants to stop at the 'svg' element:

1. hit tab: dotted line is around div1

2. hit tab: NO dotted line but active element is now on the svg element

3. hit tab: dotted line is around div2*

My question is how can I bypass the IE browser from stopping on the 'svg' element in the tab order so it behaves the way I had reported in Firefox?

You can monitor the behavior with the following console log:

$(document).keydown(function(event){
    if (event.keyCode === 9) {
      console.log(document.activeElement);
    }
  })