如何将角2事件绑定到svg对象?
问题描述:
我有以下的html:如何将角2事件绑定到svg对象?
<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。如果我改用(点击)它按预期工作。
任何想法?
答
拖动事件不支持SVG元素:
http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events。
如果您想在拖动对象的同时执行某些操作,请改用(mousemove)。
(mousemove)="dragKnob(event)"
,这应该写入到控制台:
dragKnob(event: Event): void {
console.log(event);
}
答
只是把这个事件对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" >
谢谢@Yaser,这是问题!我将它与mousedown,mouseup和mousemove结合在一起 – OtoLeo