如何在 joint.js 中对 <g> 标签内的元素进行分组？

Question

如何使用自定义元素对 joint.js 中 g 标签内的 svg 元素（如 rect 和文本）进行分组？

我只需要这样的东西。

 <g record-group="0" joint-selector="group_0" id="v-225" transform="matrix(1,0,0,1,10,30)">
<g joint-selector="bodiesGroup_0" id="v-222" fill="transparent" stroke="none">
<rect x="-10" y="0" height="20" item-id="value_1" joint-selector="itemBody_value_1" id="v-217" class="record-item-body" stroke="black" width="83"></rect>
</g>
</g>

Answer 1

您可以使用 children 属性创建嵌套标记：

var Circle = joint.dia.Element.define('custom.Circle', {
    markup: [{
        tagName: 'g',
        selector: 'wrapper',
        children: [{
            tagName: 'text'
        }]
    }]
});

如何在 joint.js 中对 <g> 标签内的元素进行分组？

How to group elements inside <g> tag in joint.js?

javascript

svg

jointjs

reactjs