События кликов, не работающие с маркером, прикрепленным к концу строки

У меня есть код ниже. Он состоит из линии с маркером, прикрепленным к ее концу. Я написал событие click для строки и маркера. Но когда я нажимаю элемент маркера, событие клика не работает, а также свойства CSS, такие как типы курсоров, также не настроенные. Как написать события кликов для элемента маркера и применить свойства 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>

источник

2016-07-06 Ashok kumar

С specification, последняя линия раздела 11.6.2 Элемент «маркер».

Атрибуты событий и прослушиватели событий, связанные с содержимым элемента «маркер» , не обрабатываются; обрабатываются только аспекты рендеринга элементов «маркер».

Это объясняет все.

источник

2016-07-06 11:05:50

-1

просто старайтесь не использовать defs и маркер и перемещать стрелку в моем коде до конца строки.

<!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>

источник

2016-07-06 11:24:36

Не работает. Маркер не прикреплен к концу строки. –

не пытайтесь переместить маркер. просто переместите позиции перед созданием и используйте ширину границы div для создания стрелки –

События кликов, не работающие с маркером, прикрепленным к концу строки

ответ

Смежные вопросы