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类。这些类可以在文档中找到，例如，组是SVG.G。
我决定将构造函数方法放在元素上，但这不是必需的。正如usage notes所说，构造不提供构造函数，而是提供可能调用构造函数的方法。
这里有将元素放在任何需要的地方所需的DOM操作。您可以调用已定义的任何其他方法。我使用constructorMethod，但我当然可以使用constructorMethod().move(100, 100)或move(100, 100)或任何其他常规svg.js元素操作序列，只要我定义了这样的方法。< / LI>

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元素？

2 个答案: