SVG focus

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

by Alex Phillips

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="#"><rect x="0" y="0" width="50" height="50" style="fill: blue;"/></a>
		<a xlink:href="#"><rect x="60" y="0" width="50" height="50" /></a>
		<a xlink:href="#"><rect x="120" y="0" width="50" height="50" /></a>
		<a xlink:href="#"><rect x="180" y="0" width="50" height="50" /></a>
		<a xlink:href="#"><rect x="240" y="0" width="50" height="50" /></a>
</svg>

CSS

rect {
	fill: blue;
}
a {
	outline: 0;
}

JavaScript

$squares = $('a');

$squares.on('focus', function() {
    $(this).find('rect').attr('opacity', '.2');
}).on('blur', function() {
	$(this).find('rect').attr('opacity', '1');
});

$squares.eq(2).focus();