I recall having this same problem before when dealing with SVG in that the origin/dimensions of the document isn’t very well defined.
You can get the bounding box of something by using
let bounds = new THREE.Box3().setFromObject( the Thing )
and use that bounds.min/max/size/center to figure out how to place your svg scene.
But this will only get you the bounds of the actual content… not the bounds of the “document” that contained the content.
Okay, I’ve just tested with your librairy and it works much better, but the problem is that now I have a blackbox. If i want to remove this black box , but keeping the ‘Loremlpsumusus’ at the same position, it is possible ?
Hey, yes, with the bouding box I can place it wherever I want, but I’d like it to already be in the right position when it loads according to the viewbox, as in the example I showed above with Vectary, i don’t know if it is possible to achieve that
Yes svg use matrix like that to know each character position.
[a c e] [1, 0 ,0 ]
[b d f] => [-1, 139.23339, 59.5]
a is the horizontal scaling coefficient (scaleX). In our case, it's 1, so there's no horizontal scaling.
b is the vertical skewing coefficient (skewY). In our case, it's 0, so there's no vertical skewing.
c is the horizontal skewing coefficient (skewX). In our case, it's 0, so there's no horizontal skewing.
d is the vertical scaling coefficient (scaleY). In our case, it's -1, which means the element is flipped vertically (it's mirrored over the x-axis).
e is the horizontal translation amount (translateX). In our case, it's 139.2339, so the element is translated 139.2339 units horizontally.
f is the vertical translation amount (translateY). In our case, it's 59.577806, so the element is translated 59.577806 units vertically.
But i’m not sure how to interpreted these units in three js.
Yes i can just change the fill=“#e62051”/> attribut to change characters colors i guess.