如何使用 SVG.invent() 创建自定义 svg.js 元素？

Question

我只是不明白。 Documentation 解释了如何创建一个带有圆角的自定义矩形，但是我应该如何创建，例如，一个内部有一些文本的矩形，就像这个：

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

好吧，很明显我应该创建一个 group，然后在其中放置一个矩形和文本，但是当我尝试以一些不同的方式执行此操作时，我没有显示任何内容。

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

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

Answer 1

致所有有同样问题的人：我找到了解决办法。在这里：

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 将显示为 <g></g> 等等。我的解决方案因此失败了。
继承自 svg.js class。 classes 可以在文档中找到，例如组是 SVG.G.
我决定将构造函数方法直接放在元素上，但这不是必需的。正如 usage notes 所说，construct 不提供构造函数，而是提供可能调用构造函数的方法。
这是将元素放在您需要的地方所需的 DOM 操作。您可以调用您定义的任何其他方法。我使用 constructorMethod，但当然我可以使用 constructorMethod().move(100, 100) 或只是 move(100, 100) 或任何其他常规 svg.js 元素操作序列，只要我定义了此类方法.

Answer 2

根据我对此处接受的答案的评论另一个例子：

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，它用作对象的构造函数。在其中我们首先调用超级构造函数来初始化形状（创建节点，设置默认值......）。之后我们可以正常使用this

如何使用 SVG.invent() 创建自定义 svg.js 元素？

How to create a custom svg.js element using SVG.invent()?

javascript

svg

svg.js