SVGをobjectタグで読み込んで、jqueryでclickイベントを設定したものの、反応しない…
index.html
<div id="hoge">
<object id="moge" type="image/svg+xml" data="hoge.svg">
</div>
index.js
$(function(){
$("#hoge").on('click', function(){
console.log("反応しない");
});
});
解決策
window loadで、svgをjavascriptで取得し、jqueryオブジェクトに変換することで解決した
index.html
<div id="hoge">
<object id="moge" type="image/svg+xml" data="hoge.svg">
</div>
index.js
$(window).on('load', function(){
var moge = document.getElementById('moge').contentDocument;
var $moge = $(moge);
$moge.on('click', function(){
console.log('反応した');
});
});
追記
SVGをobjectで読み込み、クリックでページ遷移させようとしたけどできない…
objectを囲う要素をアンカータグにして、hrefを入れても反応しない…
調べた結果:http://subtech.g.hatena.ne.jp/mayuki/20120212/1329046476
CSSで、object要素に
style.css
pointer-events: none;
を設定することで解決した。こっちの方が簡単だった。。
素直にobjectではなくimgでsvgを読み込んだ方がいいのかもしれない