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

SVG Elements不支持拖动事件：

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

如果你想在拖动对象时做某事，请改用（mousemove）。

(mousemove)="dragKnob(event)"

这应写入控制台：

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

Answer 2

只需将此事件放在HTML上，然后在里面写下函数，例如＆＃39; drag（）＆＃39;

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

如何将角度2事件绑定到svg对象？

2 个答案: