Draw on nested SVG

[notchris]

Is it possible to draw on an SVG that was nested inside another with .nested() ?

Thanks!

[Fuzzyma]

Did you try? :D
Yes it should work. Just create your element in the nested elemenet and call draw on it

[notchris]

Haha sorry, yes i did try it, however, when starting to draw, it creates one small point in the top left corner of the nested SVG. I'm wondering if this is caused by the nested SVG not having a w/h (which is the expected behavior).

[Fuzzyma]

mh, strange. That shouldnt happen. It should convert the mouse coordinates into the correct space when drawing. However, the browser handle nested elements a bit strange and differently. As a workaround you could draw in the main svg or a group and after that move the element with toParent(nestedSvg)

[notchris]

Awesome, I will try that shortly and report back, thank you for the quick response.

[notchris]

You're right, it does work. https://codesandbox.io/s/svgjs-nested-draw-testing-t7v56

After checking it out a bit more, the single point issue only occurs when also using the svg.panzoom library, and only on nested SVGs. Would a test case of that be helpful or irrelevant?

[Fuzzyma]

Mh these 2 plug-ins should work independently of each other. I am not sure if a test case would help here. But why not. I don't know if I have time to look into it though...
Ofc you could disable panzoom for the time of the draw but that's a bad workaround

[notchris]

After checking it out further, I retract the statement about svg.panzoom. The issue appears to be as follows. You can draw in a nested SVG, however, only if an element is created within the nested SVG first.

The following works:

let draw = SVG("stage").size(400,400); let nested = draw.nested(); nested.rect(100,100).fill('hotpink'); nested.polygon().draw();

This fails:

let draw = SVG("stage").size(400,400); let nested = draw.nested(); nested.polygon().draw();

Here is the updated sandbox: https://codesandbox.io/s/svgjs-nested-draw-testing-t7v56

[Fuzzyma]

I am pretty certain this is due to the way bounding boxes of nested svgs are handled. Albeit you can give a width and height to a nested svg, the bbox always reflects the box around its contents. I think in a similar fashion the screenCTM is calculated for nested svgs which makes it different with no content vs with content in it.
Unfortunately there is nothing we can do to prevent this except to add something to the svg so it's basically THERE and can be used.

I didn't look into your example yet (iam mobile), but in case you didnt try a nested svg without any viewbox or x, y it would be worth a shot. Because in that case the real matrix is the same for content vs no content

[notchris]

Thanks for the response, that is definitely interesting. I'm going to try your suggestion out now and see how it goes. I'll report back shortly.