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

Question

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

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

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

我正在尝试创建像这样工作的东西:

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

定义如下:

1. 这里是实际的 svg 元素标签，而不是 svg.js 抽象。例如，g将显示为 <g></g>等等。我的解决方案因此失败了。
2. 这里是要继承的 svg.js 类。这些类可以在文档中找到，例如，组是 SVG.G .
3. 我决定将构造函数方法放在元素的右侧，但这不是必需的。作为usage notes说，construct 不提供构造函数，而是提供可能调用构造函数的方法。
4. 这里是将元素放置在您需要的任何位置所需的 DOM 操作。您可以调用您定义的任何其他方法。我用constructorMethod ，但我当然可以使用，例如 constructorMethod().move(100, 100)或者只是 move(100, 100)或任何其他常规 svg.js 元素操作序列，只要我定义了此类方法即可。