单击SVG矩形的事件

时间:2010-10-29 16:39:46

标签: jquery svg

我在我的Mvc应用程序中使用SVG和jQuery。我在页面上绘制了一系列矩形,我想要做的是为每个矩形附加一个click或mouseover事件,比如弹出一个警告框。 到目前为止,我尝试过这样的事情:

$("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图片中加载的。

2 个答案:

答案 0 :(得分:16)

添加click处理程序的代码需要成为onLoad函数的一部分 - 并进行更改it works for me

答案 1 :(得分:2)

试试这个:

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