Svg.js: TypeError thrown in clone() when no parent node is specified by the first argument

Created on 18 Jan 2018  路  3Comments  路  Source: svgdotjs/svg.js

TypeError: this.node.parentNode is null         svg.js:4013
parent                                          svg.js:4013
remove                                          svg.js:4030
after                                           svg.js:3665
clone                                           svg.js:1093

When cloning an element, if no parent is specified by the first argument, the cloned element is supposed to be inserted right after the source element .

To insert an element after a target element, the element is removed from its parent first.
And in SVG.Doc.remove(), the existence of the element's parent is checked.
However, the cloned element does not contain a parentNode attribute, which leads to the error.

I'm using it in my class method, not sure whether it does matter with where this points to.
My class is like the following one.

class MyClass {
    constructor () {
        this.draw = svg('container').size(100, 100)
    }

    myMethod () {
        let cloned = this.draw.clone()
        ...
    }
}

I want to resize and re-position the view-port of the cloned SVG to fit all its childs' RBox and draw the cloned SVG to a canvas to get the dataURL while leaving the size unchanged of the source SVG.

It works just fine if I directly draw the source SVG on a canvas, so cloning a new SVG is my last step.

bug

Most helpful comment

Took a while but both issues are fixed in the current master now

All 3 comments

You are literally the first person who wants to clown a whole svg. Actually cloning is supposed to clone elements in the svg and pot the svg itself but I understand your use case.
If you want you can create a PR for to fix this

I think this same issue is occurring when trying to clone a mask node.

In the code below, I try to clone a mask node. Console show the following error: TypeError: this.parent(...) is null

var draw = SVG('drawing')
var rect = draw.rect(100,100).move(0,0)
var mask = draw.mask()
rect.maskWith(mask)
mask.clone()

https://codepen.io/anon/pen/KoREez

Took a while but both issues are fixed in the current master now

Was this page helpful?
0 / 5 - 0 ratings