Javascript 如何使用svg.invent（）创建自定义svg.js元素？

我就是不明白。解释如何创建具有圆角的自定义矩形，但我应该如何创建，例如，一个包含一些文本的矩形，如下所示：

+---------+
|         |
|  Hello  |
|         |
+---------+

好的，很明显，我应该创建一个

组

，然后在其中放置一个矩形和文本，但是当我尝试以不同的方式执行此操作时，我没有得到任何显示

我正在尝试创建这样的东西：

var draw = SVG('container');
var element = draw.customElement('hello').move(100, 100);

---

对于每个有同样问题的人：我找到了解决办法。这是：

SVG.CustomElement = SVG.invent({
    create: 'g',  // (1)
    inherit: SVG.G,  // (2)
    extend: {
        constructorMethod: function () {
            // (3)
            this.rect(100, 100).fill('red');
            this.text('Hello').move(25, 25);
            return this;
        }
    },
    construct: {
        customElement: function () {  // (4)
            return this.put(new SVG.CustomElement).constructorMethod();
        }
    }
});

以下是定义：

这里是实际的svg元素标记，而不是svg.js抽象。例如，

g

将显示为

，依此类推。我的解决方案因此失败了

下面是要从中继承的svg.js类。这些类可以在文档中找到，例如，组是

我决定将构造函数方法放在元素的右边，但这不是必需的。正如上面所说的，构造函数不提供构造函数，而是提供可能调用构造函数的方法

下面是将元素放置在任何需要的位置所需的DOM操作。您可以调用您定义的任何其他方法。我使用

constructorMethod

，但当然我可以使用，例如，

constructorMethod（）.move（100100）

或只是

move（100100）

或任何其他常规svg.js元素操作序列，只要我定义了此类方法

---

根据我对公认答案的评论，这里还有另一个例子：

SVG.CustomElement = SVG.invent({
    create: function () {
        SVG.G.call(this) // call super constructor
        this.rect(100, 100).fill('red');
        this.text('Hello').move(25, 25);
    },
    inherit: SVG.G,
    construct: {
        customElement: function () {
            return this.put(new SVG.CustomElement);
        }
    }
});

请注意，这里有一个函数传递给

create

，它充当对象的构造函数。在其中，我们首先调用超级构造函数来初始化形状（创建节点，设置默认值…）。

---

之后，我们可以正常使用

此

注意，

创建

也可以是执行的函数。在这种情况下，您需要确保调用超级构造函数（SVG.G），在这种情况下，正确创建了

G

-节点。之后，您可以像在

构造方法中一样使用它