Question

我有以下代码。它由一条带有标记的线组成。我写了一个关于行和标记的点击事件。但是当我单击标记元素时，click事件不起作用，并且像光标类型这样的CSS属性也没有设置。如何为marker元素编写click事件并应用css属性？

$("#line12").on("click",function() {
  alert("Hai You clicked the line")
})
$("#arrow").on("click",function() {
  alert("Hai You clicked the line")
})

#line12
{
  cursor:pointer;
}
#arrow
{
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="600px" height="200px">
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth">
      <path d="M0,0 L0,6 L9,3 z" fill="#000" />
    </marker>
  </defs>

  <line x1="50" y1="50" x2="250" y2="150" stroke="#000" id="line12" stroke-width="5" marker-end="url(#arrow)" />
</svg>

Answer 1

来自specification， 11.6.2'标记'元素部分的最后一行。

附加到a的内容的事件属性和事件侦听器 'marker'元素未被处理;只有渲染方面处理'marker'元素。

它解释了一切。

Answer 2

标记元素不可单击，但是您可以在路径的末尾放置<circle>和fill="transparent"并将事件附加到它。如果将此圆的半径r设置为[stroke-width]*[markerWidth]，则它一定会覆盖标记。

查看示例：https://jsfiddle.net/91yuz4ng/

Answer 3

尝试不使用defs和marker并将我的代码中的箭头移动到行尾。

 <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>
    #line12
    {
      cursor:pointer;
    }
    #arrow
    {
    cursor:pointer;
    position: relative;
    }
    </style>

    </head>
    <body>
    <script src="jquery-3.0.0.js"></script>
    <script>
    $(function () {
        $("#line12").click(function (event){
            alert("Hai You clicked the line")
        })
        $("#arrow").click(function(event){
            alert("Hai You clicked the path")
        });
    });
    </script>
    <svg width="600px" height="200px">
        <path id="arrow" d="M100,100 L100,160 L190,130 z" fill="#000"/>
        <line x1="50" y1="50" x2="250" y2="150" stroke="#000" id="line12"        stroke-width="5" marker-end="url(#arrow)" />
    </svg>
    </body>
    </html>

单击不适用于连接到行尾的标记的事件

3 个答案: