Comment faire <g> svg-group dans svg container draggable

Question

J'ai un problème avec faire un svg-groupe draggable dans un svg.

Voici mon problème isolé:

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(); 

Ai-je raté quelque chose? Je peux faire glisser des éléments dans le groupe, mais pas le groupe dans le svg-container.

Answer 1

Vous pouvez ajouter un rect d'arrière-plan au groupe pour intercepter les zones qui ne seraient pas créées.

Notez que les éléments g n'ont pas d'attributs ou de propriétés x, y, width ou height, ils sont toujours simplement la taille de leur contenu.

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