SVG paths have no size in IE10+, don't show tab position

Question

I have an SVG image map with various paths wrapped in anchors. These provide Bootstrap popover functionality. In Chrome, IE9 and other browsers, these links have appropriate sizes and are keyboard navigable. In IE10 and 11 they are tabbable, but no visual indication of tab position is presented since the paths and anchors have dimensions of 0.

How can I get them to have sizes in IE10+?

See a demo of the map here.

<figure class="svg-wrapper">
    <svg class="img-responsive svg-content" id="map" version="1.1" viewBox="0 0 911 656" preserveAspectRatio="xMinYMin meet">
        <image style="overflow:visible;" width="911" height="656" xlink:href="static/highed/HE-CampusMap-v5-text.png" />

        <a class="pop-top" data-value="faculty" data-dept-name="Instructional Technology" href="#">
            <path d="M505.5,96.2l-1,108l-43-0.4c0,0-19.5-32.3-66.5-31.2c-55.6,1.3-63,29.9-63,29.9l-45.5-0.4l1-108L505.5,96.2z" />
        </a>
        ...

Answer 1

You can use border of your anchor/path for visual indication of focus. Add following to your CSS:

a:focus {
    stroke-width:3;
    stroke:rgb(0,0,0);
    outline:none;
}

Demo: http://jsfiddle.net/Asg3c/4/