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

我只是不明白。 Documentation说明如何创建带圆角的自定义的矩形，但是我应该如何创建，例如，一些文本的矩形内，就像这样：如何使用SVG.invent（）创建自定义svg.js元素？

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

好了，这是很清楚，我可能需要创建一个group然后把一个矩形和文本放在它里面，但是当我尝试以某种不同的方式做到这一点时，我什么也没有显示。

我想创造的东西，是这样的：

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

来源

2017-05-25 M.Voloskov

要大家谁都有同样的问题：我已经找到了解决方案。那就是：

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元素操作序列，只要我有这样的方法定义。

来源

2017-05-26 15:09:31

注意，'create'也可以是一个被执行的函数。在这种情况下，您需要确保您调用了超级构造函数（SVG.G），在这种情况下'g'-node被正确创建。之后，你可以在你的'constructorMethod'中使用它 – Fuzzyma

根据我在这里接受的答案另一个例子注释：这里的功能传递给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

来源

2017-05-31 11:54:08 Fuzzyma

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

回答

相关问题