作成方法<g> svgコンテナ内のsvg-groupをドラッグ可能にする

Question

svg内でsvg-groupをドラッグ可能にすることに問題があります。

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コンテナ内のグループはドラッグできません。

Answer 1

グループにバックグラウンドの矩形を追加して、未レンダリングされる領域をキャッチすることができます。

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>