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

Question

I just don't get it. Documentation explains how to create a custom rectangle with rounded corners, but how should I create, for example, a rectangle with some text inside, just like this one:

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

Okay, it's pretty clear that I should probably create a group and then put a rectangle and the text inside it, but when I try do do this in some different ways, I get nothing displayed.

I'm trying to create something that works like this:

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

score 1 · Accepted Answer · answered May 26 '17 at 15:09

To everyone who have the same question: i have found a solution. Here it is:

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

And here's the definition:

Here goes the actual svg element tag, not the svg.js abstraction. For example, the g will come out as <g></g> and so on. My solutions failed because of it.
Here goes the svg.js class to inherit from. The classes may be found at the documentation, for example, the group is SVG.G.
I decided to put the constructor method right to the element, but that's not necessary. As the usage notes says, construct does not supply constructors, but rather methods that are likely to call constructors.
Here goes the DOM manipulations needed to put the element wherever you need it to be. You may call any other method that you had defined. I use constructorMethod, but of course I may use, for example, constructorMethod().move(100, 100) or just move(100, 100) or any other regular svg.js element manipulation sequence as long as I have such methods defined.

Note, that `create` can also be a function which is executed. In this case you need to make sure, that you call the super constructor (of SVG.G) in which case the `g`-node is created properly. After that you can use it like in your `constructorMethod` — Fuzzyma, May 31 '17 at 11:50

score 0 · Answer 2 · answered May 31 '17 at 11:54

According to my comment to the accepted answer here another example:

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

Note that here a function is passed to create which serves as constructor for the object. In it we first call the super constructor to initialize the shape (creates node, set defaults...). After that we can use this as normal

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

2 Answers2