bbox only returns 0 for path

[MadTooler]

I am hacking away at getting svgdom and svg.js to work within the Node-Red environment. The bbox() does not like to return any values besides zero. Same with center and anything else that looks at position. A simple rectangle does appear to work with bbox.

dx, dy, and others also do not function with these paths.

The paths tested were originally made in inkscape.

From inside the function node within Node-Red ide:

use the setup tab to import/require any external js

my troubled code

 
const window = svgdom.createSVGWindow();
const document = window.document;

// register window and document
svg.registerWindow(window, document)

// end DOM

// use svg.js as normal from here

// create canvas
const canvas = svg.SVG();


// add test rectangle
const rect = canvas.rect(100, 100).fill('yellow').move(50, 50)

// add test path with muliple segments
var path_data = "m 184.2467, 188.12341 c 44.8042, 75.2293 23.9557, 136.2636 2.9041, 197.2539 33.6155, 0.7488 57.9452, 9.2357 69.6959, 28.2051 77.6344, -16.691 158.3988, -21.3838 243.7611, -8.451 5.4947, -22.4815 22.8346, -33.1177 50.202, -33.7265 - 16.0787, -55.175 - 15.9528, -111.2503 0.7826, -168.2484 - 32.2574, -6.2921 - 46.0524, -17.8593 - 52.9118, -31.408 - 90.3634, 14.7499 - 168.8152, 12.9559 - 235.9759, -4.5202 - 12.8294, 22.5088 - 44.0061, 23.6124 - 78.458, 20.8951 z m 97.2131, 48.6065 c 10.9275, 34.3061 10.0291, 68.098 0, 101.4929 9.6764, 3.4293 15.7051, -2.1456 34.6918, 16.0547 44.0821, -8.9789 87.4855, -9.8125 130.2786, -3.3237 7.3855, -11.2446 17.1483, -17.3387 30.0007, -16.7384 - 14.7552, -39.7283 - 8.4853, -67.776 1.0561, -94.0062 - 14.2136, -0.075 - 30.1115, 2.3763 - 33.8385, -13.4286 - 40.5067, 7.2913 - 81.3049, 10.2087 - 123.0916, -1.7001 - 10.7014, 9.0112 - 23.8387, 12.6636 - 39.0971, 11.6494 z M 760.9055, 98.50001 c - 83.2566, 41.6283 - 169.879, 22.6377 - 188.9764, 0 - 134.6849, 36.6568 - 262.3433, 36.2632 - 377.9527, 0 - 25.6735, 18.9245 - 110.229, 39.3737 - 188.9764, 0 m 0, 377.9527 c 53.8364, -26.9182 141.8086, -26.0881 188.9764, 0 125.9842, -24.2128 251.9685, -22.175 377.9527, 0 30.5695, -17.6559 126.5304, -31.223 188.9764, 0 m 0, -377.9527 c - 59.7865, 89.3616 - 53.791, 287.748 0, 377.9527 M 5, 98.50001 c 73.3677, 98.4953 59.402, 267.9253 0, 377.9527 M 571.9291, 98.50001 c - 24.02924, 23.83578 - 46.73642, 45.68846 - 73.2485, 73.2485 - 17.61007, 17.85472 - 33.63581, 34.65323 - 55.0321, 55.0321 - 19.23437, 18.23688 - 40.18594, 39.90815 - 60.6957, 60.6958 - 21.98354, 21.84175 - 42.37299, 41.29235 - 66.8012, 66.8011 - 19.7683, 18.14107 - 39.5366, 37.10542 - 59.3049, 59.3049 - 25.3056, 23.13118 - 42.44173, 42.17763 - 62.8703, 62.8703 m 0, -377.9527 c 21.52641, 22.54134 43.17954, 44.87829 68.7283, 68.7283 18.78942, 19.77871 37.71897, 39.4173 57.8522, 57.8522 19.81168, 17.83776 41.30205, 40.7116 62.3959, 62.3959 20.83002, 21.48825 41.35243, 43.28411 63.4774, 63.4774 17.0615, 18.0592 35.84083, 36.1184 54.1776, 54.1776 22.68513, 19.41921 47.41754, 47.02754 71.3213, 71.3213 M 760.9055, 98.50001 c - 69.77103, 34.98098 - 139.54207, 70.88613 - 209.3131, 104.6565 - 24.39015, 12.50672 - 47.26094, 25.77313 - 74.1054, 37.0527 - 30.55536, 14.7997 - 61.29864, 29.7873 - 94.5342, 47.2672 - 33.3489, 16.43336 - 65.62288, 31.79181 - 101.493, 50.7464 - 29.38654, 14.89825 - 58.31252, 29.61228 - 94.309, 47.1545 C 130.73511, 413.58515 66.315726, 445.79485 5, 476.45271 M 5, 98.50001 c 59.404627, 31.25156 118.54165, 63.57355 179.2467, 89.6234 31.83175, 15.91586 62.82393, 31.41193 97.2131, 48.6065 33.831, 17.98491 67.662, 33.98982 101.493, 50.7465 30.40109, 15.57967 60.45235, 31.15933 93.4781, 46.739 24.79297, 13.30977 49.58593, 25.20118 74.3789, 37.1895 70.0319, 36.09433 140.0638, 70.17688 210.0957, 105.0478";
const path = canvas.path(path_data).id("testPath");
//path.size(100, 100); // not needed, but found this causes parser error
path.fill('none');
path.stroke({ color: '#000000', width: 4, linecap: 'round', linejoin: 'round' });

node.warn(path.svg());  // console output within NodeRed ide


// get bbox untransformed size, rbox will not run-> assuming need transform present
var path_bbox= path.bbox();

// this outputs 0 0 0 0
node.warn(path_bbox) // console output within NodeRed ide

// get your svg as string
console.log(canvas.svg())

// also trying to get this to work, but no joy with query
//var elementDetails = document.getElementById('testPath');
//var elementDetails = document.querySelector('./testPath');
//node.warn(elementDetails)
//var pathOnly = document.querySelector('./path')
//node.warn(pathOnly)


// sends svg to node output
msg.payload = canvas.svg();

return msg;

Thanks for the very impressive js projects! I look forward to seeing them crank through my workload after I figure out what I am probably doing wrong.

[Fuzzyma]

First thing that comes to my mind is that you never attach the svg to the Dom.
It is not strictly needed for all the things to work but some things might bug out.

So put a SVG().addTo(document.documentElement)

Since it's an svg document anyway, SVG(document.documentElement) should work as well (basically reusing the svg root element of the Dom).

Anything fixed by that?

[MadTooler]

Thank you for the reply. No luck with adding the suggested lines. Not sure if the way I found formatting them for NodeRed to accept them without throwing an error is fully correct. I did see a little difference in the console output when running my document.getElementById('testPath') where without the last recommended I see "null" while with I see "[object object]"

NodeRed 4.03
Node.Js 20.x LTS I think
Current svgdom and svg.js

NOTE When I tested bbox with my same path in JSFiddle, I did get good bbox results.

Is there anything more I can provide from my setup that might help shed light on the issue?

This is the way I tested it:

const window = svgdom.createSVGWindow();
const document = window.document;

// register window and document
svg.registerWindow(window, document)

// end DOM

// use svg.js as normal from here

// create canvas
const canvas = svg.SVG();
// connect svg to DOM
// tried several variations of connecting svg to DOM
//const canvas = svg.SVG(document.documentElement);
//canvas.svg(document.documentElement);
//const canvas = svg.SVG().addTo(document.documentElement)
//svg.SVG().addTo(document.documentElement);
canvas.addTo(document.documentElement);

// add test rectangle
const rect = canvas.rect(100, 100).fill('yellow').move(50, 50)

// add test path with muliple segments
var path_data = "m 184.2467, 188.12341 c 44.8042, 75.2293 23.9557, 136.2636 2.9041, 197.2539 33.6155, 0.7488 57.9452, 9.2357 69.6959, 28.2051 77.6344, -16.691 158.3988, -21.3838 243.7611, -8.451 5.4947, -22.4815 22.8346, -33.1177 50.202, -33.7265 - 16.0787, -55.175 - 15.9528, -111.2503 0.7826, -168.2484 - 32.2574, -6.2921 - 46.0524, -17.8593 - 52.9118, -31.408 - 90.3634, 14.7499 - 168.8152, 12.9559 - 235.9759, -4.5202 - 12.8294, 22.5088 - 44.0061, 23.6124 - 78.458, 20.8951 z m 97.2131, 48.6065 c 10.9275, 34.3061 10.0291, 68.098 0, 101.4929 9.6764, 3.4293 15.7051, -2.1456 34.6918, 16.0547 44.0821, -8.9789 87.4855, -9.8125 130.2786, -3.3237 7.3855, -11.2446 17.1483, -17.3387 30.0007, -16.7384 - 14.7552, -39.7283 - 8.4853, -67.776 1.0561, -94.0062 - 14.2136, -0.075 - 30.1115, 2.3763 - 33.8385, -13.4286 - 40.5067, 7.2913 - 81.3049, 10.2087 - 123.0916, -1.7001 - 10.7014, 9.0112 - 23.8387, 12.6636 - 39.0971, 11.6494 z M 760.9055, 98.50001 c - 83.2566, 41.6283 - 169.879, 22.6377 - 188.9764, 0 - 134.6849, 36.6568 - 262.3433, 36.2632 - 377.9527, 0 - 25.6735, 18.9245 - 110.229, 39.3737 - 188.9764, 0 m 0, 377.9527 c 53.8364, -26.9182 141.8086, -26.0881 188.9764, 0 125.9842, -24.2128 251.9685, -22.175 377.9527, 0 30.5695, -17.6559 126.5304, -31.223 188.9764, 0 m 0, -377.9527 c - 59.7865, 89.3616 - 53.791, 287.748 0, 377.9527 M 5, 98.50001 c 73.3677, 98.4953 59.402, 267.9253 0, 377.9527 M 571.9291, 98.50001 c - 24.02924, 23.83578 - 46.73642, 45.68846 - 73.2485, 73.2485 - 17.61007, 17.85472 - 33.63581, 34.65323 - 55.0321, 55.0321 - 19.23437, 18.23688 - 40.18594, 39.90815 - 60.6957, 60.6958 - 21.98354, 21.84175 - 42.37299, 41.29235 - 66.8012, 66.8011 - 19.7683, 18.14107 - 39.5366, 37.10542 - 59.3049, 59.3049 - 25.3056, 23.13118 - 42.44173, 42.17763 - 62.8703, 62.8703 m 0, -377.9527 c 21.52641, 22.54134 43.17954, 44.87829 68.7283, 68.7283 18.78942, 19.77871 37.71897, 39.4173 57.8522, 57.8522 19.81168, 17.83776 41.30205, 40.7116 62.3959, 62.3959 20.83002, 21.48825 41.35243, 43.28411 63.4774, 63.4774 17.0615, 18.0592 35.84083, 36.1184 54.1776, 54.1776 22.68513, 19.41921 47.41754, 47.02754 71.3213, 71.3213 M 760.9055, 98.50001 c - 69.77103, 34.98098 - 139.54207, 70.88613 - 209.3131, 104.6565 - 24.39015, 12.50672 - 47.26094, 25.77313 - 74.1054, 37.0527 - 30.55536, 14.7997 - 61.29864, 29.7873 - 94.5342, 47.2672 - 33.3489, 16.43336 - 65.62288, 31.79181 - 101.493, 50.7464 - 29.38654, 14.89825 - 58.31252, 29.61228 - 94.309, 47.1545 C 130.73511, 413.58515 66.315726, 445.79485 5, 476.45271 M 5, 98.50001 c 59.404627, 31.25156 118.54165, 63.57355 179.2467, 89.6234 31.83175, 15.91586 62.82393, 31.41193 97.2131, 48.6065 33.831, 17.98491 67.662, 33.98982 101.493, 50.7465 30.40109, 15.57967 60.45235, 31.15933 93.4781, 46.739 24.79297, 13.30977 49.58593, 25.20118 74.3789, 37.1895 70.0319, 36.09433 140.0638, 70.17688 210.0957, 105.0478";
const path = canvas.path(path_data).id("testPath");
//path.size(100, 100); // not needed, but found this causes parser error
path.fill('none');
path.stroke({ color: '#000000', width: 4, linecap: 'round', linejoin: 'round' });

node.warn(path.svg());  // console output within NodeRed ide

// maybe it needs it here after a path is added? 
// this resulted in no path being added to final svg output
//path.addTo(document.documentElement);
//svg.SVG().addTo(document.documentElement);

// get bbox untransformed size, rbox will not run-> assuming need transform present
var path_bbox = path.bbox();

// this outputs 0 0 0 0
node.warn(path_bbox) // console output within NodeRed ide

// get your svg as string
console.log(canvas.svg())

// also trying to get this to work, but no joy with query
var elementDetails = document.getElementById('testPath');
//var elementDetails = document.querySelector('./testPath');
// without canvas.addTo(document.documentElement) outputs "null"
//    with outputs "[object Object]" only
node.warn(elementDetails)
//var pathOnly = document.querySelector('./path')
//node.warn(pathOnly)


// sends svg to node output
msg.payload = canvas.svg();

return msg;

[MadTooler]

If svgDOM is loading as an ESM module (I am not sure if it is or not with my limited understanding), a note I found from one of NodeRed's developers may be relevant:

Node-REDs import procedure is only of limited use (can't really say it fails) for ESM-only modules - as it's returning just the object defined by export default

taken from the very tail end of here:

[Fuzzyma]

Please get in contact with me via mail (listed in my profile). I think this needs some more context