How do I bind an angular 2 event to an svg object?

I have the following 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>

And the script:

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

The result is it doesn’t execute dragKnob. If I instead use (click) it works as expected.

Any ideas?

Answer

Drag events are not supported on SVG Elements:

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

if you want to do something while the object is dragged use (mousemove) instead.

(mousemove)="dragKnob(event)"

And this should write to console:

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