Question

我正在使用SVG.js V3 / svgdom，并试图使一个绘图系统融合在一起，在该绘图系统中，我有一系列javascript类，每个javascript类输出一个画布组，该画布组可以包含一个或多个svg元素。可以将这些类合并为其他类，然后合并并定位到主画布中。这是一个示例：

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

运行时出现此错误（第53行是“ const combo1 = new Combo1（{canvas：canvas}）。get（）。move（0，50）”一个）：

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)

有人可以阐明问题所在吗？

SVG.js bbox问题和定位问题

0 个答案: