如何制作<g> svg集群内的svg-group可拖动

我在svg内制作一个svg-group可拖动的问题。如何制作<g> 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容器中拖动组。

来源

2017-10-09 JohnC Dark

您可以为该组添加背景矩形以捕捉否则将被解除的任何区域。

请注意，g元素不具有x，y，宽度或高度属性或属性，它们始终只是其内容的大小。

$("#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>

来源

2017-10-09 21:14:36

啊好了，是一个抽象的元素？我的想法是在svg中移动组，并获得其他计算的位置。但我会尝试另一次尝试。谢谢。 –

只是一个容器 –

如何制作<g> svg集群内的svg-group可拖动

回答

相关问题