Question

我在svg中使svg-group可拖动时遇到问题。

这是我的问题：

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中的组。

Answer 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容器中创建<g> svg-group draggable

1 个答案: