Question

我有以下两个矩形的SVG

<?xml version="1.0"?>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" id="svg1">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <rect id="rec1" height="106" width="148" y="82" x="94" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <rect id="rec2" height="145" width="229" y="240" x="294" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
</svg>

我正在尝试使用

对'rect'元素执行click事件处理程序

<html>
    <head>
        <script src="http:///code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <object data="Bild1.svg" style="width: 600px" id="mysvg"/>

        <script type="text/javascript">

            $(document.body).on('click','#mysvg rect', function() {
                alert('click');
            });

        </script>
    </body>

</html>

或使用

<html>
    <head>
        <script src="http:///code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <object data="Bild1.svg" style="width: 600px" id="mysvg"/>

        <script type="text/javascript">

        $("#mysvg")[0].addEventListener('click', function(e) {
          // do nothing if the target does not have the class drawnLine
          console.log($(this).data('index'));
        });

        </script>
    </body>

</html>

如

中所述

Event delegation on SVG Elements

以上代码均无效...

有什么见解？

Answer 1

您是否尝试过以不同的方式进行此操作？请注意display="none"

<?xml version="1.0" ?>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" id="svg1" display="none">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g id="rec1">
    <title>Layer 1</title>
    <rect id="rec1" height="106" width="148" y="82" x="94" stroke-width="5" stroke="#000000" fill="#FF0000" />
    <rect id="rec2" height="145" width="229" y="240" x="294" stroke-width="5" stroke="#000000" fill="#FF0000" />
</g>

<!---Somewhere in the body--->

<div>
<svg class="rec1">
    <use xlink:href="#rec1"></use>
</svg>
</div>

jQuery的：

  $(document.body).on('click', '.rec1', function () {
  alert('click');
  });

css :(我刚进入大尺寸进行测试）

 .rec1 {
width:1000px;
height:1000px
}

它对我有用。我希望它有所帮助

Answer 2

向rect对象添加onclick事件

<rect id="rec1" height="106" width="148" y="82" x="94" stroke-width="5" stroke="#000000" fill="#FF0000" onclick='yourFunction()' />

单击使用<object>标记嵌入的SVG的处理程序

2 个答案: