As a result, the SVG appears upside down and backwards. The simplest fix after SVGLoader is to change the scale of the svgGroup.set(1, -1, 1) to flip it.
To center the svgGroup, use Box3
const box = new Box3()
box.setFromObject(this)
const center = new Vector3()
box.getCenter(center)
this.translateX(-center.x)
this.translateY(-center.y)
So my problem is that I can center it, but I don’t want it to be in the center, I’d like it to take into account the viewbox to position it. Like this :
Because I have the impression that on import it no longer takes the viewbox into account?
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
The short answer is that the SVGShape doesn’t support clipPath and is incorrectly drawing what’s in the <def> section. If you remove the <path> from within clipPath, the black box goes away.
I added axis at origin, changed background to white and removed centering so its easier to see
I’ll make a few corrections and post an update tomorrow.
Note that SVGShape doesn’t support clipPath. I’ll update readme with SVG elements not supported.
Yesterday I managed to delete the black thanks box. So since the SVGShape doesn’t support clipPath there’s no way of knowing why it starts in this position?
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]
Where:
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.
But what I don’t understand is why vectary and blender, for example, position the svg like that, whereas three js doesn’t, even though it’s the same svg.
Once I fixed the problem with width and height being incorrect, its easy to center. Just create a bounding box from origin to viewbox size, find the center and translate object to center.
centerOnViewBox(): Vector3 {
const box = new Box3()
box.expandByPoint(new Vector3())
box.expandByPoint(new Vector3(this.svg.width, this.svg.height, 0).multiply(this.scale))
const center = new Vector3()
box.getCenter(center)
this.translateX(-center.x)
this.translateY(-center.y)
return box.getSize(center)
}
