SVGアイコンを作り、クリックした時に Javascript でイベントを発生させようとしたらIE11だけうまく動かなくて悩んだのでメモ。

作動する例･しない例

<svg>
<rect id="myBox" x="0" y="0" fill="red" width="200" height="80" />
</svg>

<script>
$(function() {
// $("#myBox").on('click','#myBox', function() { // 作動しない
// $('#myBox').mousedown(function(e){ // 作動する
    var e = document.getElementById("myBox");
    alert(e.getAttribute("width"));
    });
});
</script>

緑文字「$('#myBox').mousedown(function(e){ 」だと上手く動く。
赤文字「$("#myBox").on('click','#myBox', function() {」だと、IE11だけうまく動かない。
いや、動くには動くのだけど、クリックできるエリアが極端に狭い (svgタグの外枠、上下2～3px部分を狙ってクリックすればイベントが作動する) ので、とても実用的ではない。

メモ

最初は背景が「ほぼ透明な 線画のsvg」でテストしていたため、「背景を fill すれば解決するよね？」なんて思っていたけれど、on('click') がダメだった感じ。