SVG focus

Focus not applied correctly to a elements in FF and IE11 (possibly other versions).

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.1" width="100%" height="100%">
		<a xlink:href="#a"><rect x="0" y="0" width="50" height="50" style="fill: blue;"/></a>
		<a xlink:href="#b"><rect x="60" y="0" width="50" height="50" /></a>
		<a xlink:href="#c"><rect x="120" y="0" width="50" height="50" /></a>
		<a xlink:href="#d"><rect x="180" y="0" width="50" height="50" /></a>
		<a xlink:href="#e"><rect x="240" y="0" width="50" height="50" /></a>
</svg>

CSS

rect {
	fill: blue;
}
a {
	stroke: 2px dotted red;
  outline-offset: -4px;
}

JavaScript

var squares = document.getElementsByTagName('a');

for (var i=0,max=squares.length; i<max; i++) {
    var square = squares[i];
    square.addEventListener('focus', function() {
        this.setAttribute('opacity', '.2');
    }, square);
    square.addEventListener('blur', function() {
	    this.setAttribute('opacity', '1');
    }, square);
}

try {
    squares[2].focus();
}catch(e){ console.log("Error! ", e); }