通過在jquery中使用x和y屬性來拖動SVG

Question

是否可以通過使用SVG的x和y屬性使SVG可拖動？

是不適用於可拖動的jQuery

$('#ninja').draggable({drag: function( event, ui ) {
   // $('#ninja').attr('x',ui.position.top+'%');
   // $('#ninja').attr('y',ui.position.left+'%');
}
});

在這里提琴： http : //jsfiddle.net/n4d7gq3z/

Answer 1

這是可行的，但是如果您查看元素檢查器（例如Chrome開發人員工具中提供的元素檢查器），則會注意到svg聲明結尾的路徑是：

<path transform="translate(-29 -22) scale(2.2)" opacity="0.25" fill=" #fff" d="M210.018,10.505H45.983c-19.599,0-35.487,15.889-35.487,35.487v69.409 c36.33,14.751,76.046,22.896,117.67,22.896c42.263,0,82.558-8.395,119.336-23.576V46.66 C245.504,26.394,229.615,10.505,210.018,10.505z"/>

優先於所有其他元素，並將其自身覆蓋在所有其他svg元素和路徑之上。 如果您刪除此路徑或以不引起干擾的方式修改樣式或結構，則會觸發您的忍者svg可拖動事件，然后就可以開始處理了。