SVGLoader: Transform (Scale, Translate) resulting Path objects

Questions
,
1

We try to create an extrude geo from an SVG. This works fine. The question is can we transform (translate, scale) the SVG or the resulting shape?

One possible solution would be to use Shape.extractPoints: Create points, transform them with a matrix and recreate the corresponding Shape (and holes) and pass the resulting shape to ExtrudeGeo.

Is there an easier solution to it? Does threejs provide something in this direction?

Thanks in advance

2

If you start with a SVG model and end up with a THREE.BufferGeometry or THREE.Mesh or THREE.Group, you can translate, rotate and scale the result.

Instead of:

I’d suggest:

or

The following example translates and scales SVG files after they are being extruded with THREE.ExtrudeGeometry and put in a THREE.Mesh in a THREE.Group (see lines 80-81):

https://codepen.io/boytchev/full/jOvOJxo

3

Thanks for your answer. Maybe to clarify: The idea is to use the SVG as a way cut out holes. Something like this:

// outer being a rectangular shape
svgData.paths.forEach((path) => {
    const shapes = SVGLoader.createShapes(path);
    shapes.forEach((shape) => {
        outer.holes.push(shape);
    });
});

Now we would like to move the cut-out around (translate) and most likely we have to scale it:

Imagine a rectangular shape from which we use the svg image to cut-out (shape.holes). The final shape is then passed to the extrude geo. The svg image needs to be translated and scaled in context of the outer shape. This has to be done in “Shape-Space” and not in 3d…

4

I see now. As far as I remember, shapes, paths and curves have no built-in transformations.

Have you considered injecting a transform attribute in the SVG itself, after reading it, but before processing it into a shape

SVG → inject → shape → extrude