如何使 svg 容器中的 <g> svg-group 可拖动答案

【问题标题】：How to make <g> svg-group within svg container draggable如何使 svg 容器中的 <g> svg-group 可拖动
【发布时间】：2018-03-20 21:20:46
【问题描述】：

我在将 svg-group 设置为可在 svg 中拖动时遇到问题。

这是我的问题：

https://jsfiddle.net/mtj2jb9f/

HTML：

<svg id="body" width="300" height="20px">
  <g id="entry" x="0" style="width: 100px;">
    <rect class="entry-body" height="20" width="100" x="0" y="0"></rect>
  </g>
</svg>

JS：

$("#entry").draggable();

我错过了什么吗？我可以拖动组内的元素，但不能拖动 svg-container 中的组。

【问题讨论】：

标签： jquery user-interface svg draggable

【解决方案1】：

您可以将背景矩形添加到组中以捕捉任何否则将无法渲染的区域。

请注意，g 元素没有 x、y、width 或 height 属性或属性，它们始终只是其内容的大小。

$("#entry").draggable();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<svg id="body" class="ui-widget-content" width="300" height="200px">
  <g id="entry">
    <rect width="100" height="200" visibility="hidden" pointer-events="all"/>
    <rect class="entry-body" height="20" width="100" x="0" y="0"></rect>
    <rect class="entry-body" height="20" width="100" x="0" y="50"></rect>
  </g>
</svg>

【讨论】：

啊，好吧，所以是一个抽象元素？我的想法是在 svg 中移动组并获取它的位置以进行其他计算。但我会再尝试一次。谢谢。
只是一个容器