SVG.invent（）を使用してカスタムsvg.js要素を作成する方法は？

Question

私はそれを得ることはありません。 Documentationはどのように角の丸いカスタムの四角形を作成するために説明しますが、私は同じように、内部に、例えば、いくつかのテキストを持つ長方形を作成する必要がありますどのようにこの1：

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

さて、それは私がおそらく、作成すべきことはかなり明らかですa 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(); 
     } 
    } 
}); 

そして、ここでの定義です：：ここにある。ここ

1. 実際SVG要素タグ、ないsvg.jsの抽象化を行きます。たとえば、gは<g></g>などとなります。私の解決策は失敗したために失敗しました。
2. ここからsvg.jsクラスを継承します。クラスはドキュメントで見つけることができます。たとえば、グループはSVG.Gです。
3. 私は要素にコンストラクタメソッドを置くことに決めましたが、それは必要ではありません。 usage notesによれば、コンストラクタはコンストラクタを提供するのではなく、コンストラクタを呼び出す可能性の高いメソッドを提供します。
4. ここでは、必要な場所に要素を配置するために必要なDOM操作について説明します。あなたが定義した他の方法を呼び出すことができます。私はconstructorMethodを使用していますが、もちろん、constructorMethod().move(100, 100)、またはmove(100, 100)などの通常のsvg.js要素操作シーケンスを使用することができます。ここでは受け入れ答え別の例に私のコメントによると

Answer 2

：ここでは関数はオブジェクトのコンストラクタとして機能しますcreateに渡され

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

注意。最初にスーパーコンストラクタを呼び出してシェイプを初期化します（ノードを作成し、デフォルトを設定...）。 その後、thisを通常通り使用することができます。