使用带有jquery的x和y属性拖动SVG

Question

是否可以通过使用SVG的x和y属性来拖动SVG？

is不适用于jquery可拖动

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

Fiddle here：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可拖动事件就会触发，然后你就可以开始处理了。