Как связать событие с угловым 2 с объектом svg?

Question

У меня есть следующий HTML:

<svg:g *ngFor='let knob of knobs' > 
    <svg:path id="arc1" fill="blue" stroke="#446688" stroke-width="1" fill-rule="nonzero" draggable="true" [attr.d]="knob" (drag)="dragKnob(event)" class="draggable"/> 
</svg:g> 

И сценарий:

dragKnob(event: Event): void { 
    console.log(event); 
} 

Результатом является не выполнение dragKnob. Если я вместо этого использую (клик), он работает так, как ожидалось.

Любые идеи?

Answer 1

Drag события не поддерживаются SVG элементов:

http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events.

Если вы хотите что-то сделать, в то время как объект перетаскивается, используйте (mousemove).

(mousemove)="dragKnob(event)" 

И это должно написать в консоль:

dragKnob(event: Event): void { 
    console.log(event); 
} 

Answer 2

Просто поместите эти события на HTML и писать функции внутри, как 'сопротивление()'

<svg id="robot" version="1.1" viewBox="70 150 150 220" pointer- 
    events="visibleFill" 
     **(mouseover)="drag($event)" 
     (mouseleave)="leave($event)" 
     (mousedown)="grab($event)" 
     (mouseup)="drop($event)"** 

     class="scaling-svg robotPath" >