SVG.js 3.0.+ Support

[Byteschmiede]

Hey there,

I'm just wondering how to use the new svg.js 3.0.5 with svgdom. The constructor of svg.js has changed.

Thanks

[Fuzzyma]

Valid Question :). svg.js v3 should work with svgdom generally. At least I didnt found any stuff which wasnt working till now. You would use it the following way:

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

registerWindow(window , window .document)

const canvas = SVG(document.documentElement)

Please note, that the esm and node version of svg.js do not export a global SVG object anymore. Instead every property which was once avilable through the gloval SVG is now available via import/require. So if you need e.g. extend, you would use const {SVG, registerWindow, extend} = require('@svgdotjs/svg.js').

If you want the old object bag, you can simply build it yourself:

const obj = require('@svgdotjs/svg.js')
const SVG = (arg) => {
  return obj.SVG(arg)
}

Object.assign(SVG, obj)

Thats basically what is done here: https://github.com/svgdotjs/svg.js/blob/f5eff8745af43fcfcc2e837d89d549cb66220d99/src/svg.js

But we only build a bundle with global SVG for browsers

[Byteschmiede]

Thanks for your fast answer :)

I was able to run my app again but there are more errors popping up:

node.hasAttribute is not a function @svgdotjs/svg.js/src/elements/Element.js:30:14

same when I run the svgdom tests

[Fuzzyma]

Thats strange. Do you know at which point this error occurs?

[Byteschmiede]

The error occures when I call

SVG(document.documentElement)

[Fuzzyma]

I think the problem was, that svgdom wasnt published as new version for a long time. A huge amount of bugfixes and additions have been made since the last release. Thats why I did a new release. It should work now. I also updated the usage example. Pls report back if it works for you now

[Byteschmiede]

Its running now but i've got an stacktrace on calling draw.text(string);

TypeError: globals.window.getComputedStyle is not a function stack: "TypeError: globals.window.getComputedStyle is not a function at Tspan.<anonymous> (..../@svgdotjs/svg.js/dist/svg.node.js:6481:39) at Text.each (..../@svgdotjs/svg.js/dist/svg.node.js:2413:13) at Text.rebuild (..../@svgdotjs/svg.js/dist/svg.node.js:6480:12) at Text.text (..../@svgdotjs/svg.js/dist/svg.node.js:6453:30) at Svg$1.<anonymous> (..../@svgdotjs/svg.js/dist/svg.node.js:6520:35) at Svg$1.text (..../@svgdotjs/svg.js/dist/svg.node.js:296:17)

Sounds like that the text rebuild function wants to access a global method which isn't defined by svgdom.

svg.node.js:6469 ` rebuild(rebuild) { // store new rebuild flag if given if (typeof rebuild === 'boolean') { this._rebuild = rebuild; } // define position of all lines

if (this._rebuild) {
  var self = this;
  var blankLineOffset = 0;
  var leading = this.dom.leading;
  this.each(function () {
    var fontSize = globals.window.getComputedStyle(this.node).getPropertyValue('font-size');
    var dy = leading * new SVGNumber(fontSize);

    if (this.dom.newLined) {
      this.attr('x', self.attr('x'));

      if (this.text() === '\n') {
        blankLineOffset += dy;
      } else {
        this.attr('dy', dy + blankLineOffset);
        blankLineOffset = 0;
      }
    }
  });
  this.fire('rebuild');
}

return this;

} // Enable / disable build mode `

[Fuzzyma]

You are right about that. We are hitting the parts of the code which use dom features which are not implemented yet in svgdom. I will look into it :)

[Byteschmiede]

btw are the 3.0 docs already up to date?

[Fuzzyma]

No unfortunately not. We posted a bit of code every day in the advent time on twitter to give at least a starting point to people. But we just dont have enough manpower for the docs. We are working on it - slowly

[Fuzzyma]

@Byteschmiede I releasted a new version which fixes the issue. Please report more bugs :D

[Fuzzyma]

bumped to 0.0.18 which improves bboxes a lot. Nested transformed elements should have correct bboxes now

[Byteschmiede]

Its working now for me 👍 Thank you

[Fuzzyma]

Glad to hear that! See you later when you find the next bug :D