web-dev-qa-db-ja.com

SVG長方形のクリックイベント

MvcアプリケーションでjQueryと一緒にSVGを使用しています。ページ上に一連の四角形を描画し、各四角形にクリックイベントまたはマウスオーバーイベントをアタッチします。たとえば、警告ボックスをポップアップします。これまでに次のようなことを試しました：

$("rect[id='Y6']").attr('onclick', function() { alert("Hello!") });

そして

$("rect[id='Y6']").live('click', function() {    
    alert("Hello!");
};

しかし、残念ながら、このイベントはどれも実際にはこのコントロールで機能しませんでした。誰でもこれを行う方法を知っていますか？

編集：

以下で使用しているJavaScriptコードを追加します。

<script type="text/javascript">
    /*function resetSize(svg, width, height) {
        svg.configure({ width: width || $(svg._container).width(),
            height: height || $(svg._container).height()
        });
    }*/
    function onLoad(svg, error) {
        //svg.text(10, 20, error || 'Loaded into ' + this.id);
        //resetSize(svg, null, null); //'100%', '100%');
    }

    $(function() {
        $('#layout').svg({});

        var svg = $('#layout').svg('get');
        svg.load('<%= Url.Action("Layout", new{ id = Model.Id }) %>', { //<%= Url.Content("~/media/svg/lion.xml") %>', {
            addTo: false,
            changeSize: false,
            onLoad: onLoad
        });
    });    

$('rect#Y6').click( function(){
  alert('hello');
});

</script>

長方形はsvg画像から読み込まれます。

jquerysvg
16
Hallaghan

clickハンドラーを追加するためのコードは、onLoad関数の一部である必要があります-その変更により 私にとっては機能します 。

16
robertc

これを試して：

$('rect#Y6').click( function(){
  alert('hello');
});
2
Ken Redler