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

Posted 2023-05-08

【中文标题】如何使 svg 容器中的 <g> svg-group 可拖动

【英文标题】：How to make <g> svg-group within svg container draggable

【发布时间】：2018-03-20 21:20:46

【问题描述】：

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

这是我的问题：

https://jsfiddle.net/mtj2jb9f/

html：

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

JS：

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

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

【参考方案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"  >
  <g id="entry">
    <rect   visibility="hidden" pointer-events="all"/>
    <rect class="entry-body"   x="0" y="0"></rect>
    <rect class="entry-body"   x="0" y="50"></rect>
  </g>
</svg>

【讨论】：

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

只是一个容器