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

【问题标题】：Drag an SVG by using x and y attribute with jquery使用 jquery 的 x 和 y 属性拖动 SVG
【发布时间】：2015-05-03 14:29:25
【问题描述】：

是否可以通过使用 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/

【问题讨论】：

Rapheal.js 和 snapsvg.io 是两个用于操作 SVG 的库，但仅限于 SVG 容器内。

标签： jquery jquery-ui svg draggable

【解决方案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 元素和路径之上。如果您删除此路径或以不会造成干扰的方式修改样式或结构，则会触发您的 ninja svg 可拖动事件，然后您可以开始处理。

【讨论】：