Error: Unbound namespace prefix: "svgjs"

[BuyingANew-Soul]

In the text nodes svgjs:data attribute is causing the error. I am using svgjs in nodejs environment.

<text transform="matrix(0.7257 -0.2285 0.3004 0.9538 5258.6953 5362.7295)" x="7844.0200723945545" y="1879.1765428204626" svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">
                    <tspan x="0" y="0" fill="#E74810" font-family="'ArialMT'" font-size="5px">Code:BR 4001, Size:X
                    </tspan>
                    <tspan x="50.029" y="0" fill="#E74810" font-family="'ArialMT'" font-size="5px">L</tspan>
 </text>

[Fuzzyma]

I need more context. Whats your code?

[BuyingANew-Soul]

The goal is to arrange a specific element of the svg according to a specified quantity such that they don't overlap and stays within a given bin size. I didn't use clone because I need the id of the elements for later use. First I am selecting the specific element by ID

let selector = `[id*=${key} i]`;
const element = svg.findOne(selector);

Then assigning new id which is just the previous id with a added count of element. Then moving the element like this:

element.move(width_needed, total_height_previous_elmnts);

Now I am holding the manipulated element in a string,

var body = "";
body += element.svg();

Then when I have all the elements on that body variable as string, I am creating a new svg from string like this:

const draw = SVG(document.documentElement);
var svg = draw.svg(body);
return svg;

And here the error occurs. If the svg elements don't have any text element then it works fine.

[Fuzzyma]

You can just change the id after clone. That would make things easier 🤔

[BuyingANew-Soul]

I thought about this but didn't try because these elements contain several childNodes with different ids and nested nodes. I thought taking the strings would be easier that time until I faced this error. I am going to try the solution you proposed. Do you suspect anything that's wrong with the current approach?

[Fuzzyma]

I guess you are using svgdom? Seems like its parser is not happy about the svgjs namespace. didnt encounter that error before tho. You can try to remove the namespace on export by passing a function into the svg() function. That function will be called on every node. If you remove the svgjs:data attribute, the import should work.

[BuyingANew-Soul]

I implemented the a new version with the cloning. The error is gone, and I am able to successfully write the new svg file. But for those elements I was facing the error, now in the output svg they are not showing! Also the moving of the parts are not correct. Please checkout this simple version:

const fs = require('fs');
const { createSVGWindow } = require('svgdom')
const window = createSVGWindow()
const document = window.document
const { SVG, registerWindow } = require('@svgdotjs/svg.js')
//const {svgFromFile, readAllSvgs, writeSvg} = require('./readingSvg');

// register window and document
registerWindow(window, document);

const svgFromFile = (path) => {
    try {
        const svgString = fs.readFileSync(path, 'utf8');
        return svgString;
    } catch (err) {
        console.error(err);
    }

};

const svgFromString = (string) => {

    const draw = SVG(document.documentElement);
    var svg = draw.svg(string);
    return svg;

};

const writeSvg = (svg, name) => {

    fs.writeFile(name, svg, err => {
    if (err) {
        console.error(err);
    }
    // file written successfully
    });
};

var svgString = svgFromFile("svgs/test svgs/bib1.svg");
var svg = svgFromString(svgString);
//console.log(svg.svg())

// getting the specific element
let selector = `[id*="P8_5_"]`;
const element = svg.findOne(selector);

var el = element.clone()
el.move(100,100);

svg.clear()
svg.width(4000);
svg.height(4000);
svg.viewbox(0,0,4000,4000);
svg.add(el);

writeSvg(svg.svg(), 'svgs/new.svg');

The input svg is: https://github.com/BuyingANew-Soul/prepare-nest-file/blob/master/svgs/test%20svgs/bib1.svg?short_path=370b066 If I choose any of the Element whose id starts with P (P85, P75 etc), then the output is like this: https://github.com/BuyingANew-Soul/prepare-nest-file/blob/master/svgs/new.svg?short_path=380691d But for other elements like Right_thigh3, Left_thigh3 etc, the same code works fine. Am I doing something wrong here?

[Fuzzyma]

Sorry for the late reply. Your svgs are fairly big. Its hard to see what the issue is.

Can you create a minimal example that showcases the bug?

[Fuzzyma]

should be fixed in master