1

I am using SVG.js V3/svgdom and trying to get together a drawing system in which I have a series of javascript classes, each of which outputs a canvas group that can contain one or more svg elements. These classes maybe them be combined into other classes and then incorporated and positioned into the main canvas. Here is an example:

const window = require('svgdom')
const document = window.document
const {SVG, registerWindow} = require('@svgdotjs/svg.js')

registerWindow(window, document)

class Part1 {
  constructor(params) {
    this.canvas = params.canvas
    this.width = params.width || 100
    this.height = params.height || 50
  }
  get (){
    let group = this.canvas.group()
    group.rect(this.width / 2, this.height).fill('red').move(0, 0)
    group.rect(this.width / 2, this.height).fill('green').move(this.width / 2, 0)
    return group
  }
}

class Part2 {
  constructor(params) {
    this.canvas = params.canvas
    this.width = params.width || 100
    this.height = params.height || 50
  }
  get (){
    let group = this.canvas.group()
    group.rect(this.width / 2, this.height).fill('yellow').move(0, 0)
    group.rect(this.width / 2, this.height).fill('blue').move(this.width / 2, 0)
    return group
  }
}

class Combo1 {
  constructor(params) {
    this.canvas = params.canvas
  }
  get (){
    let group = canvas.group()
    const set1 = new Part1({canvas: canvas})
    set1.get().move(0, 0)
    group.add(set1)
    const set2 = new Part2({canvas: canvas})
    set2.get().move(0, set1.height)
    group.add(set2)
    return group
  }
}

const canvas = SVG(document.documentElement).size(100, 150)
canvas.rect(100, 50).fill('orange').move(0, 0)
const combo1 = new Combo1({canvas: canvas}).get().move(0, 50)
canvas.add(combo1)

console.log(canvas.svg())

When running that I get this error (line 53 being the "const combo1 = new Combo1({canvas: canvas}).get().move(0, 50)" one):

D:\Learning\svg\node_modules\@svgdotjs\svg.js\dist\svg.node.js:3124
      throw new Error('Getting bbox of element "' + el.node.nodeName + '" is not possible. ' + e.toString());
      ^

Error: Getting bbox of element "g" is not possible. TypeError: el.cloneNode is not a function
    at getBox.call.el (D:\Learning\svg\node_modules\@svgdotjs\svg.js\dist\svg.node.js:3124:13)
    at G.getBox (D:\Learning\svg\node_modules\@svgdotjs\svg.js\dist\svg.node.js:3110:11)
    at G.bbox (D:\Learning\svg\node_modules\@svgdotjs\svg.js\dist\svg.node.js:3117:25)
    at G.move (D:\Learning\svg\node_modules\@svgdotjs\svg.js\dist\svg.node.js:7706:33)
    at Object.<anonymous> (D:\Learning\svg\test.js:53:51)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

Could someone shed some light as to what the problem is?

Bigus
  • 71
  • 3
  • I think there are 2 problems. First one is, that cloneNode seems not to be implemented by svgdom (thats what it throws) but I think there is an error before that which is beeing catched by svg.js. But not sure about that. You might want to dig deeper – Fuzzyma Nov 27 '19 at 10:38
  • Thanks for the reply Fuzzyma. I think it may have been my mistake as instead of this: `const set1 = new Part1({canvas: canvas}) set1.get().move(0, 0) group.add(set1)` this solved it: `const set1 = new Part1({canvas: canvas}) const set1SVG = set1.get().move(0, 0) group.add(set1SVG)` – Bigus Dec 04 '19 at 17:20

0 Answers0