@pdfme/pdf-lib 1.18.1 → 1.18.4

package/cjs/api/svg.js

@@ -1,35 +1,73 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawSvg = void 0;
-const tslib_1 = require("tslib");
 const node_html_better_parser_1 = require("node-html-better-parser");
 const colors_1 = require("./colors");
 const rotations_1 = require("./rotations");
 const operators_1 = require("./operators");
-const elements_1 = require("../utils/elements");
-const intersections_1 = require("../utils/intersections");
-const maths_1 = require("../utils/maths");
-/**
- * take an array of T and turn it into an 2D-array where each sub array has n elements
- * ex: [1,2,3,4] -> [[1,2], [3, 4]]
- * @param arr the array of elements
- * @param n the size of each sub array
- */
-const groupBy = (arr, n) => {
-    if (arr.length <= n)
-        return [arr];
-    return arr === null || arr === void 0 ? void 0 : arr.reduce((acc, curr, i) => {
-        const index = Math.floor(i / n);
-        if (i % n) {
-            acc[index].push(curr);
+const matrix_1 = require("../types/matrix");
+const combineMatrix = ([a, b, c, d, e, f], [a2, b2, c2, d2, e2, f2]) => [
+    a * a2 + c * b2,
+    b * a2 + d * b2,
+    a * c2 + c * d2,
+    b * c2 + d * d2,
+    a * e2 + c * f2 + e,
+    b * e2 + d * f2 + f,
+];
+const applyTransformation = ([a, b, c, d, e, f], { x, y }) => ({
+    x: a * x + c * y + e,
+    y: b * x + d * y + f
+});
+const transformationToMatrix = (name, args) => {
+    switch (name) {
+        case 'scale':
+        case 'scaleX':
+        case 'scaleY': {
+            // [sx 0 0 sy 0 0]
+            const [sx, sy = sx] = args;
+            return [name === 'scaleY' ? 1 : sx, 0, 0, name === 'scaleX' ? 1 : sy, 0, 0];
         }
-        else {
-            acc.push([curr]);
+        case 'translate':
+        case 'translateX':
+        case 'translateY': {
+            // [1 0 0 1 tx ty]
+            const [tx, ty = tx] = args;
+            // -ty is necessary because the pdf's y axis is inverted
+            return [1, 0, 0, 1, name === 'translateY' ? 0 : tx, name === 'translateX' ? 0 : -ty];
         }
-        return acc;
-    }, []);
+        case 'rotate': {
+            // [cos(a) sin(a) -sin(a) cos(a) 0 0]
+            const [a, x = 0, y = 0] = args;
+            const t1 = transformationToMatrix('translate', [x, y]);
+            const t2 = transformationToMatrix('translate', [-x, -y]);
+            // -args[0] -> the '-' operator is necessary because the pdf rotation system is inverted
+            const aRadians = (0, rotations_1.degreesToRadians)(-a);
+            const r = [Math.cos(aRadians), Math.sin(aRadians), -Math.sin(aRadians), Math.cos(aRadians), 0, 0];
+            // rotation around a point is the combination of: translate * rotate * (-translate)
+            return combineMatrix(combineMatrix(t1, r), t2);
+        }
+        case 'skewY':
+        case 'skewX': {
+            // [1 tan(a) 0 1 0 0]
+            // [1 0 tan(a) 1 0 0]
+            // -args[0] -> the '-' operator is necessary because the pdf rotation system is inverted
+            const a = (0, rotations_1.degreesToRadians)(-args[0]);
+            const skew = Math.tan(a);
+            const skewX = name === 'skewX' ? skew : 0;
+            const skewY = name === 'skewY' ? skew : 0;
+            return [1, skewY, skewX, 1, 0, 0];
+        }
+        case 'matrix': {
+            const [a, b, c, d, e, f] = args;
+            const r = transformationToMatrix('scale', [1, -1]);
+            const m = [a, b, c, d, e, f];
+            return combineMatrix(combineMatrix(r, m), r);
+        }
+        default:
+            return matrix_1.identityMatrix;
+    }
 };
-const isCoordinateInsideTheRect = (dot, rect) => (0, maths_1.isEqual)(0, (0, maths_1.distance)(dot, rect.orthoProjection(dot)));
+const combineTransformation = (matrix, name, args) => combineMatrix(matrix, transformationToMatrix(name, args));
 const StrokeLineCapMap = {
     butt: operators_1.LineCapStyle.Butt,
     round: operators_1.LineCapStyle.Round,
@@ -44,662 +82,144 @@ const StrokeLineJoinMap = {
     miter: operators_1.LineJoinStyle.Miter,
     round: operators_1.LineJoinStyle.Round,
 };
-const getInnerSegment = (start, end, rect) => {
-    const isStartInside = isCoordinateInsideTheRect(start, rect);
-    const isEndInside = isCoordinateInsideTheRect(end, rect);
-    let resultLineStart = start;
-    let resultLineEnd = end;
-    // it means that the segment is already inside the rect
-    if (isEndInside && isStartInside)
-        return new elements_1.Segment(start, end);
-    const line = new elements_1.Segment(start, end);
-    const intersection = (0, intersections_1.getIntersections)([rect, line]);
-    // if there's no intersection it means that the line doesn't intersects the svgRect and isn't visible
-    if (intersection.length === 0)
-        return;
-    if (!isStartInside) {
-        // replace the line start point by the nearest intersection
-        const nearestPoint = intersection.sort((p1, p2) => (0, maths_1.distanceCoords)(start, p1) - (0, maths_1.distanceCoords)(start, p2))[0];
-        resultLineStart = new elements_1.Point(nearestPoint);
-    }
-    if (!isEndInside) {
-        // replace the line start point by the nearest intersection
-        const nearestPoint = intersection.sort((p1, p2) => (0, maths_1.distanceCoords)(end, p1) - (0, maths_1.distanceCoords)(end, p2))[0];
-        resultLineEnd = new elements_1.Point(nearestPoint);
-    }
-    return new elements_1.Segment(resultLineStart, resultLineEnd);
-};
-const cropSvgElement = (svgRect, element) => {
-    var _a, _b;
-    switch (element.tagName) {
-        case 'text': {
-            const fontSize = element.svgAttributes.fontSize || 12;
-            // TODO: compute the right font boundaries to know which characters should be drawn
-            // this is an workaround to draw text that are just a little outside the viewbox boundaries
-            const start = new elements_1.Point({
-                x: element.svgAttributes.x || 0,
-                y: element.svgAttributes.y || 0,
-            });
-            const paddingRect = new elements_1.Rectangle(new elements_1.Point({
-                x: svgRect.start.x - fontSize,
-                y: svgRect.start.y + fontSize,
-            }), new elements_1.Point({ x: svgRect.end.x + fontSize, y: svgRect.end.y - fontSize }));
-            if (!isCoordinateInsideTheRect(start, paddingRect)) {
-                element.set_content('');
-            }
-            break;
-        }
-        case 'line': {
-            const start = new elements_1.Point({
-                x: element.svgAttributes.x1,
-                y: element.svgAttributes.y1,
-            });
-            const end = new elements_1.Point({
-                x: element.svgAttributes.x2,
-                y: element.svgAttributes.y2,
-            });
-            const line = getInnerSegment(start, end, svgRect);
-            element.svgAttributes.x1 = line ? line.A.x : 0;
-            element.svgAttributes.x2 = line ? line.B.x : 0;
-            element.svgAttributes.y1 = line ? line.A.y : 0;
-            element.svgAttributes.y2 = line ? line.B.y : 0;
-            break;
-        }
-        case 'path': {
-            // the path origin coordinate
-            const basePoint = new elements_1.Point({
-                x: element.svgAttributes.x || 0,
-                y: element.svgAttributes.y || 0,
-            });
-            const normalizePoint = (p) => new elements_1.Point({ x: p.x - basePoint.x, y: p.y - basePoint.y });
-            /**
-             *
-             * @param origin is the origin of the current drawing in the page coordinate system
-             * @param command the path instruction
-             * @param params the instruction params
-             * @returns the point where the next instruction starts and the new instruction text
-             */
-            const handlePath = (origin, command, params) => {
-                switch (command) {
-                    case 'm':
-                    case 'M': {
-                        const isLocalInstruction = command === command.toLocaleLowerCase();
-                        const nextPoint = new elements_1.Point({
-                            x: (isLocalInstruction ? origin.x : basePoint.x) + params[0],
-                            y: (isLocalInstruction ? origin.y : basePoint.y) + params[1],
-                        });
-                        return {
-                            point: nextPoint,
-                            command: `${command}${params[0]},${params[1]}`,
-                        };
-                    }
-                    case 'v':
-                    case 'V':
-                    case 'h':
-                    case 'H':
-                    case 'l':
-                    case 'L': {
-                        const isLocalInstruction = ['l', 'v', 'h'].includes(command);
-                        const getNextPoint = () => {
-                            switch (command.toLocaleLowerCase()) {
-                                case 'l':
-                                    return new elements_1.Point({
-                                        x: (isLocalInstruction ? origin.x : basePoint.x) + params[0],
-                                        y: (isLocalInstruction ? origin.y : basePoint.y) + params[1],
-                                    });
-                                case 'v':
-                                    return new elements_1.Point({
-                                        x: origin.x,
-                                        y: (isLocalInstruction ? origin.y : basePoint.y) + params[0],
-                                    });
-                                case 'h':
-                                    return new elements_1.Point({
-                                        x: (isLocalInstruction ? origin.x : basePoint.x) + params[0],
-                                        y: origin.y,
-                                    });
-                                default:
-                                    return new elements_1.Point({
-                                        x: 0,
-                                        y: 0,
-                                    });
-                            }
-                        };
-                        const nextPoint = getNextPoint();
-                        const normalizedNext = normalizePoint(nextPoint);
-                        let endPoint = new elements_1.Point({ x: nextPoint.x, y: nextPoint.y });
-                        let startPoint = new elements_1.Point({ x: origin.x, y: origin.y });
-                        const result = getInnerSegment(startPoint, endPoint, svgRect);
-                        if (!result) {
-                            return {
-                                point: nextPoint,
-                                command: `M${normalizedNext.x},${normalizedNext.y}`,
-                            };
-                        }
-                        // if the point wasn't moved it means that it's inside the rect
-                        const isStartInside = result.A.isEqual(startPoint);
-                        const isEndInside = result.B.isEqual(endPoint);
-                        // the intersection points are referencing the pdf coordinates, it's necessary to convert these points to the path's origin point
-                        endPoint = normalizePoint(new elements_1.Point(result.B.toCoords()));
-                        startPoint = normalizePoint(new elements_1.Point(result.A.toCoords()));
-                        const startInstruction = isStartInside
-                            ? ''
-                            : `M${startPoint.x},${startPoint.y}`;
-                        const endInstruction = isEndInside
-                            ? ''
-                            : `M${normalizedNext.x},${normalizedNext.y}`;
-                        return {
-                            point: nextPoint,
-                            command: `${startInstruction} L${endPoint.x},${endPoint.y} ${endInstruction} `,
-                        };
-                    }
-                    case 'a':
-                    case 'A': {
-                        const isLocalInstruction = command === 'a';
-                        const [, , , , , x, y] = params;
-                        const nextPoint = new elements_1.Point({
-                            x: (isLocalInstruction ? origin.x : basePoint.x) + x,
-                            y: (isLocalInstruction ? origin.y : basePoint.y) + y,
-                        });
-                        // TODO: implement the code to fit the Elliptical Arc Curve instructions into the viewbox
-                        return {
-                            point: nextPoint,
-                            command: `${command} ${params.map((p) => `${p}`).join()}`,
-                        };
-                    }
-                    case 'c':
-                    case 'C': {
-                        const isLocalInstruction = command === 'c';
-                        let x = 0;
-                        let y = 0;
-                        for (let pendingParams = params; pendingParams.length > 0; pendingParams = pendingParams.slice(6)) {
-                            const [, , , , pendingX, pendingY] = pendingParams;
-                            if (isLocalInstruction) {
-                                x += pendingX;
-                                y += pendingY;
-                            }
-                            else {
-                                x = pendingX;
-                                y = pendingY;
-                            }
-                        }
-                        const nextPoint = new elements_1.Point({
-                            x: (isLocalInstruction ? origin.x : basePoint.x) + x,
-                            y: (isLocalInstruction ? origin.y : basePoint.y) + y,
-                        });
-                        // TODO: implement the code to fit the Cubic Bézier Curve instructions into the viewbox
-                        return {
-                            point: nextPoint,
-                            command: `${command} ${params.map((p) => `${p}`).join()}`,
-                        };
-                    }
-                    case 's':
-                    case 'S':
-                        const isLocalInstruction = command === 's';
-                        let x = 0;
-                        let y = 0;
-                        for (let pendingParams = params; pendingParams.length > 0; pendingParams = pendingParams.slice(4)) {
-                            const [, , pendingX, pendingY] = pendingParams;
-                            x += pendingX;
-                            y += pendingY;
-                        }
-                        const nextPoint = new elements_1.Point({
-                            x: (isLocalInstruction ? origin.x : basePoint.x) + x,
-                            y: (isLocalInstruction ? origin.y : basePoint.y) + y,
-                        });
-                        return {
-                            point: nextPoint,
-                            command: `${command} ${params.map((p) => `${p}`).join()}`,
-                        };
-                    case 'q':
-                    case 'Q': {
-                        const isLocalInstruction = command === 'q';
-                        const [, , x, y] = params;
-                        const nextPoint = new elements_1.Point({
-                            x: (isLocalInstruction ? origin.x : basePoint.x) + x,
-                            y: (isLocalInstruction ? origin.y : basePoint.y) + y,
-                        });
-                        // TODO: implement the code to fit the Quadratic Bézier Curve instructions into the viewbox
-                        return {
-                            point: nextPoint,
-                            command: `${command} ${params.map((p) => `${p}`).join()}`,
-                        };
-                    }
-                    // TODO: Handle the remaining svg instructions: t,q
-                    default:
-                        return {
-                            point: origin,
-                            command: `${command} ${params.map((p) => `${p}`).join()}`,
-                        };
-                }
-            };
-            const commands = (_a = element.svgAttributes.d) === null || _a === void 0 ? void 0 : _a.match(/(v|h|a|l|t|m|q|c|s|z)([0-9,e\s.-]*)/gi);
-            let currentPoint = new elements_1.Point({ x: basePoint.x, y: basePoint.y });
-            const newPath = commands === null || commands === void 0 ? void 0 : commands.map((command) => {
-                var _a, _b;
-                const letter = (_a = command.match(/[a-z]/i)) === null || _a === void 0 ? void 0 : _a[0];
-                const params = (_b = command
-                    .match(/(-?[0-9]+\.[0-9]+(e[+-]?[0-9]+)?)|(-?\.[0-9]+(e[+-]?[0-9]+)?)|(-?[0-9]+)/gi)) === null || _b === void 0 ? void 0 : _b.filter((m) => m !== '').map((v) => parseFloat(v));
-                if (letter && params) {
-                    const result = handlePath(currentPoint, letter, params);
-                    if (result) {
-                        currentPoint = result.point;
-                        return result.command;
-                    }
-                }
-                return command;
-            }).join(' ');
-            element.svgAttributes.d = newPath;
-            break;
-        }
-        case 'ellipse':
-        case 'circle': {
-            if (element.svgAttributes.cx === undefined ||
-                element.svgAttributes.cy === undefined ||
-                element.svgAttributes.rx === undefined ||
-                element.svgAttributes.ry === undefined) {
-                break;
-            }
-            const { cx = 0, cy = 0, rx = 0, ry = 0 } = element.svgAttributes;
-            const center = new elements_1.Point({
-                x: cx,
-                y: cy,
-            });
-            const rotation = ((_b = element.svgAttributes.rotation) === null || _b === void 0 ? void 0 : _b.angle) || 0;
-            // these points are relative to the ellipse's center
-            const a = new elements_1.Point((0, maths_1.rotate)({ x: -rx, y: 0 }, (0, rotations_1.degreesToRadians)(rotation)));
-            const b = new elements_1.Point((0, maths_1.rotate)({ x: rx, y: 0 }, (0, rotations_1.degreesToRadians)(rotation)));
-            const c = new elements_1.Point((0, maths_1.rotate)({ x: 0, y: ry }, (0, rotations_1.degreesToRadians)(rotation)));
-            // these points are relative to the real coordinate system
-            const A = center.plus(a);
-            const B = center.plus(b);
-            const C = center.plus(c);
-            const ellipse = new elements_1.Ellipse(A, B, C);
-            const intersections = (0, intersections_1.getIntersections)([svgRect, ellipse]);
-            const isCenterInsideRect = isCoordinateInsideTheRect(center, svgRect);
-            /**
-             * if there are less than 2 intersection, there are two possibilities:
-             * - the ellipse is outside the viewbox and therefore isn't visible
-             * - the ellipse is inside the viewbox and don't need to be cropped
-             */
-            if (intersections.length < 2) {
-                !isCenterInsideRect && element.setAttribute('rx', '0');
-                !isCenterInsideRect && (element.svgAttributes.rx = 0);
-                !isCenterInsideRect && element.setAttribute('ry', '0');
-                !isCenterInsideRect && (element.svgAttributes.ry = 0);
-                break;
-            }
-            // viewbox rectangle coordinates
-            const P1 = new elements_1.Point(svgRect.getCoords());
-            const P3 = new elements_1.Point(svgRect.getEnd());
-            const P2 = new elements_1.Point({ x: P3.x, y: P1.y });
-            const P4 = new elements_1.Point({ x: P1.x, y: P3.y });
-            const top = new elements_1.Segment(P1, P2);
-            const right = new elements_1.Segment(P2, P3);
-            const bottom = new elements_1.Segment(P3, P4);
-            const left = new elements_1.Segment(P4, P1);
-            // Warning: keep the order of the segments, it's important when building the path that will represent the ellipse
-            const rectSegments = [top, right, bottom, left];
-            const isPointInsideEllipse = (P) => (P.x - cx) ** 2 / rx ** 2 + (P.y - cy) ** 2 / ry ** 2 <= 1;
-            // check if the rect boundaries are inside the circle
-            const isRectInsideEllipse = isPointInsideEllipse(P1) &&
-                isPointInsideEllipse(P2) &&
-                isPointInsideEllipse(P3) &&
-                isPointInsideEllipse(P4);
-            // the segments that are intersecting the circle. And, therefore, are lines that are cropping the drawing
-            const circleSegments = isRectInsideEllipse
-                ? rectSegments
-                : rectSegments.map((segment, i) => {
-                    const [p1, p2] = (0, intersections_1.getIntersections)([segment, ellipse])
-                        // it's important to sort the segment's point because it impacts the angle of the arc, the points are sorted on clockwise direction
-                        .sort((p1, p2) => {
-                        // top
-                        if (i === 0) {
-                            return p1.x - p2.x;
-                            // right
-                        }
-                        else if (i === 1) {
-                            return p2.y - p1.y;
-                            // bottom
-                        }
-                        else if (i === 2) {
-                            return p2.x - p1.x;
-                            // left
-                        }
-                        else {
-                            return p1.y - p2.y;
-                        }
-                    });
-                    if (p1 && p2) {
-                        return new elements_1.Segment(new elements_1.Point(p1), new elements_1.Point(p2));
-                        // if the other point isn't inside the circle it means that the circle isn't cropped by the segment
-                    }
-                    else if (p1 &&
-                        (isPointInsideEllipse(segment.A) ||
-                            isPointInsideEllipse(segment.B))) {
-                        const intersectionPoint = new elements_1.Point(p1);
-                        const innerPoint = isPointInsideEllipse(segment.A)
-                            ? segment.A
-                            : segment.B;
-                        // ensures that the segment is always following the clockwise direction
-                        const start = innerPoint.isEqual(segment.A)
-                            ? innerPoint
-                            : intersectionPoint;
-                        const end = innerPoint.isEqual(segment.A)
-                            ? intersectionPoint
-                            : innerPoint;
-                        return new elements_1.Segment(start, end);
-                        // if there's no intersection and the segment's points are inside the Ellipse it means that the segment should be drawn as part of the ellipse
-                    }
-                    else if (!(p1 && p2) &&
-                        isPointInsideEllipse(segment.A) &&
-                        isPointInsideEllipse(segment.B)) {
-                        return segment;
-                    }
-                    return;
-                });
-            const inverseAngle = (angle) => (360 - angle) % 360;
-            const pointsAngle = (p1, p2, direction = 'clockwise') => {
-                const startAngle = (0, rotations_1.radiansToDegrees)(Math.atan2(p1.y - center.y, p1.x - center.x));
-                const endAngle = (0, rotations_1.radiansToDegrees)(Math.atan2(p2.y - center.y, p2.x - center.x));
-                const arcAngle = (endAngle + (360 - startAngle)) % 360;
-                return direction === 'clockwise' ? arcAngle : inverseAngle(arcAngle);
-            };
-            /**
-             * - draw a line for each segment
-             * - if two segments aren't connected draw an arc connecting them
-             */
-            let startPoint;
-            // the point where the pen is located
-            let currentPoint;
-            let lastSegment;
-            let path = circleSegments.reduce((path, segment) => {
-                if (!segment)
-                    return path;
-                if (!startPoint) {
-                    startPoint = segment.A;
-                    path = `M ${segment.A.x},${segment.A.y}`;
-                }
-                // if the current segment isn't connected to the last one, connect both with an arc
-                if (lastSegment && !lastSegment.B.isEqual(segment.A)) {
-                    const arcAngle = pointsAngle(segment.A, lastSegment.B);
-                    // angles greater than 180 degrees are marked as large-arc-flag = 1
-                    path += `A ${rx},${ry} ${rotation} ${arcAngle > 180 ? 1 : 0},0 ${segment.A.x}, ${segment.A.y}`;
-                }
-                path += ` L ${segment.B.x},${segment.B.y}`;
-                currentPoint = segment.B;
-                lastSegment = segment;
-                return path;
-            }, '');
-            // if the path isn't closed, close it by drawing an arc
-            if (startPoint && currentPoint && !startPoint.isEqual(currentPoint)) {
-                const arcAngle = pointsAngle(currentPoint, startPoint, 'counter-clockwise');
-                // angles greater than 180 degrees are marked as large-arc-flag = 1
-                path += `A ${rx},${ry} ${rotation} ${arcAngle > 180 ? 1 : 0},0 ${startPoint.x}, ${startPoint.y}`;
-            }
-            // create a new element that will represent the cropped ellipse
-            const newElement = (0, node_html_better_parser_1.parse)(`<path d="${path}" fill="red"/>`).firstChild;
-            const svgAttributes = Object.assign(Object.assign({}, element.svgAttributes), { 
-                // the x and y values are 0 because all the path coordinates are global
-                x: 0, y: 0, 
-                // the path coordinates are already rotated
-                rotate: undefined, d: path });
-            Object.assign(newElement, { svgAttributes });
-            return newElement;
-        }
-        case 'rect': {
-            const { x = 0, y = 0, width = 0, height = 0, rotate: rawRotation, } = element.svgAttributes;
-            const rotation = (rawRotation === null || rawRotation === void 0 ? void 0 : rawRotation.angle) || 0;
-            if (!(width && height))
-                return element;
-            // bottomLeft point
-            const origin = new elements_1.Point({ x, y });
-            const rotateAroundOrigin = (p) => new elements_1.Point((0, maths_1.rotate)(normalize(p), (0, rotations_1.degreesToRadians)(rotation))).plus(origin);
-            const normalize = (p) => p.plus({ x: -origin.x, y: -origin.y });
-            const topLeft = rotateAroundOrigin(origin.plus({ x: 0, y: -height }));
-            const topRight = rotateAroundOrigin(origin.plus({ x: width, y: -height }));
-            const bottomRight = rotateAroundOrigin(origin.plus({ x: width, y: 0 }));
-            const pointToString = (p) => [p.x, p.y].join();
-            const d = `M${pointToString(topLeft)} L${pointToString(topRight)} L${pointToString(bottomRight)} L${pointToString(origin)}  L${pointToString(topLeft)}`;
-            const el = (0, node_html_better_parser_1.parse)(`<path d="${d}"/>`).firstChild;
-            const newAttributes = Object.assign(Object.assign({}, element.svgAttributes), { d, x: 0, y: 0 });
-            // @ts-ignore
-            delete newAttributes.width;
-            // @ts-ignore
-            delete newAttributes.height;
-            delete newAttributes.rotate;
-            delete newAttributes.rotation;
-            Object.assign(el, {
-                svgAttributes: newAttributes,
-            });
-            return cropSvgElement(svgRect, el);
-        }
-        // TODO: implement the crop for the following elements
-        case 'image':
-        default:
-            return element;
-    }
-    return element;
-};
 // TODO: Improve type system to require the correct props for each tagName.
 /** methods to draw SVGElements onto a PDFPage */
 const runnersToPage = (page, options) => ({
-    text(element) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
-            const anchor = element.svgAttributes.textAnchor;
-            const dominantBaseline = element.svgAttributes.dominantBaseline;
-            const text = element.text.trim().replace(/\s/g, ' ');
-            const fontSize = element.svgAttributes.fontSize || 12;
-            /** This will find the best font for the provided style in the list */
-            function getBestFont(style, fonts) {
-                const family = style.fontFamily;
-                if (!family)
-                    return undefined;
-                const isBold = style.fontWeight === 'bold' || Number(style.fontWeight) >= 700;
-                const isItalic = style.fontStyle === 'italic';
-                const getFont = (bold, italic, family) => fonts[family + (bold ? '_bold' : '') + (italic ? '_italic' : '')];
-                return (getFont(isBold, isItalic, family) ||
-                    getFont(isBold, false, family) ||
-                    getFont(false, isItalic, family) ||
-                    getFont(false, false, family) ||
-                    Object.keys(fonts).find((fontFamily) => fontFamily.startsWith(family)));
-            }
-            const font = options.fonts && getBestFont(element.svgAttributes, options.fonts);
-            const textWidth = (font || page.getFont()[0]).widthOfTextAtSize(text, fontSize);
-            const textHeight = (font || page.getFont()[0]).heightAtSize(fontSize);
-            const offsetX = anchor === 'middle' ? textWidth / 2 : anchor === 'end' ? textWidth : 0;
-            const offsetY = dominantBaseline === 'text-before-edge'
-                ? textHeight
-                : dominantBaseline === 'text-after-edge'
-                    ? -textHeight
-                    : dominantBaseline === 'middle'
-                        ? textHeight / 2
-                        : 0;
-            const point = new elements_1.Point({
-                x: (element.svgAttributes.x || 0) - offsetX,
-                y: (element.svgAttributes.y || 0) - offsetY,
-            });
-            // TODO: compute the right font boundaries to know which characters should be drawed
-            // this is an workaround to draw text that are just a little outside the viewbox boundaries
-            page.drawText(text, {
-                x: point.x,
-                y: point.y,
-                font,
-                size: fontSize,
-                color: element.svgAttributes.fill,
-                opacity: element.svgAttributes.fillOpacity,
-                rotate: element.svgAttributes.rotate,
-            });
+    async text(element) {
+        const anchor = element.svgAttributes.textAnchor;
+        const dominantBaseline = element.svgAttributes.dominantBaseline;
+        const text = element.text.trim().replace(/\s/g, ' ');
+        const fontSize = element.svgAttributes.fontSize || 12;
+        /** This will find the best font for the provided style in the list */
+        function getBestFont(style, fonts) {
+            const family = style.fontFamily;
+            if (!family)
+                return undefined;
+            const isBold = style.fontWeight === 'bold' || Number(style.fontWeight) >= 700;
+            const isItalic = style.fontStyle === 'italic';
+            const getFont = (bold, italic, family) => fonts[family + (bold ? '_bold' : '') + (italic ? '_italic' : '')];
+            return (getFont(isBold, isItalic, family) ||
+                getFont(isBold, false, family) ||
+                getFont(false, isItalic, family) ||
+                getFont(false, false, family) ||
+                Object.keys(fonts).find((fontFamily) => fontFamily.startsWith(family)));
+        }
+        const font = options.fonts && getBestFont(element.svgAttributes, options.fonts);
+        const textWidth = (font || page.getFont()[0]).widthOfTextAtSize(text, fontSize);
+        const textHeight = (font || page.getFont()[0]).heightAtSize(fontSize);
+        const offsetX = anchor === 'middle' ? textWidth / 2 : anchor === 'end' ? textWidth : 0;
+        const offsetY = dominantBaseline === 'text-before-edge'
+            ? textHeight
+            : dominantBaseline === 'text-after-edge'
+                ? -textHeight
+                : dominantBaseline === 'middle'
+                    ? textHeight / 2
+                    : 0;
+        page.drawText(text, {
+            x: -offsetX,
+            y: -offsetY,
+            font,
+            // TODO: the font size should be correctly scaled too
+            size: fontSize,
+            color: element.svgAttributes.fill,
+            opacity: element.svgAttributes.fillOpacity,
+            matrix: element.svgAttributes.matrix,
+            clipSpaces: element.svgAttributes.clipSpaces,
         });
     },
-    line(element) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
-            page.drawLine({
-                start: {
-                    x: element.svgAttributes.x1,
-                    y: element.svgAttributes.y1,
-                },
-                end: {
-                    x: element.svgAttributes.x2,
-                    y: element.svgAttributes.y2,
-                },
-                thickness: element.svgAttributes.strokeWidth,
-                color: element.svgAttributes.stroke,
-                opacity: element.svgAttributes.strokeOpacity,
-                lineCap: element.svgAttributes.strokeLineCap,
-            });
+    async line(element) {
+        page.drawLine({
+            start: {
+                x: element.svgAttributes.x1 || 0,
+                y: -element.svgAttributes.y1 || 0,
+            },
+            end: {
+                x: element.svgAttributes.x2 || 0,
+                y: -element.svgAttributes.y2 || 0,
+            },
+            thickness: element.svgAttributes.strokeWidth,
+            color: element.svgAttributes.stroke,
+            opacity: element.svgAttributes.strokeOpacity,
+            lineCap: element.svgAttributes.strokeLineCap,
+            matrix: element.svgAttributes.matrix,
+            clipSpaces: element.svgAttributes.clipSpaces,
         });
     },
-    path(element) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
-            if (!element.svgAttributes.d)
-                return;
-            // See https://jsbin.com/kawifomupa/edit?html,output and
-            page.drawSvgPath(element.svgAttributes.d, {
-                x: element.svgAttributes.x || 0,
-                y: element.svgAttributes.y || 0,
-                borderColor: element.svgAttributes.stroke,
-                borderWidth: element.svgAttributes.strokeWidth,
-                borderOpacity: element.svgAttributes.strokeOpacity,
-                borderLineCap: element.svgAttributes.strokeLineCap,
-                color: element.svgAttributes.fill,
-                opacity: element.svgAttributes.fillOpacity,
-                scale: element.svgAttributes.scale,
-                rotate: element.svgAttributes.rotate,
-                fillRule: element.svgAttributes.fillRule,
-            });
+    async path(element) {
+        if (!element.svgAttributes.d)
+            return;
+        // See https://jsbin.com/kawifomupa/edit?html,output and
+        page.drawSvgPath(element.svgAttributes.d, {
+            x: 0,
+            y: 0,
+            borderColor: element.svgAttributes.stroke,
+            borderWidth: element.svgAttributes.strokeWidth,
+            borderOpacity: element.svgAttributes.strokeOpacity,
+            borderLineCap: element.svgAttributes.strokeLineCap,
+            color: element.svgAttributes.fill,
+            opacity: element.svgAttributes.fillOpacity,
+            fillRule: element.svgAttributes.fillRule,
+            matrix: element.svgAttributes.matrix,
+            clipSpaces: element.svgAttributes.clipSpaces,
         });
     },
-    image(element) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
-            const { src } = element.svgAttributes;
-            if (!src)
-                return;
-            const isPng = src.match(/\.png(\?|$)|^data:image\/png;base64/gim);
-            const img = isPng
-                ? yield page.doc.embedPng(src)
-                : yield page.doc.embedJpg(src);
-            const { x, y, width, height } = getFittingRectangle(img.width, img.height, element.svgAttributes.width || img.width, element.svgAttributes.height || img.height, element.svgAttributes.preserveAspectRatio);
-            page.drawImage(img, {
-                x: (element.svgAttributes.x || 0) + x,
-                y: (element.svgAttributes.y || 0) - y - height,
-                width,
-                height,
-                opacity: element.svgAttributes.fillOpacity,
-                xSkew: element.svgAttributes.skewX,
-                ySkew: element.svgAttributes.skewY,
-                rotate: element.svgAttributes.rotate,
-            });
+    async image(element) {
+        const { src } = element.svgAttributes;
+        if (!src)
+            return;
+        const isPng = src.match(/\.png(\?|$)|^data:image\/png;base64/gim);
+        const img = isPng
+            ? await page.doc.embedPng(src)
+            : await page.doc.embedJpg(src);
+        const { x, y, width, height } = getFittingRectangle(img.width, img.height, element.svgAttributes.width || img.width, element.svgAttributes.height || img.height, element.svgAttributes.preserveAspectRatio);
+        page.drawImage(img, {
+            x,
+            y: -y - height,
+            width,
+            height,
+            opacity: element.svgAttributes.fillOpacity,
+            matrix: element.svgAttributes.matrix,
+            clipSpaces: element.svgAttributes.clipSpaces,
         });
     },
-    rect(element) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
-            if (!element.svgAttributes.fill && !element.svgAttributes.stroke)
-                return;
-            page.drawRectangle({
-                x: element.svgAttributes.x,
-                y: element.svgAttributes.y || 0,
-                width: element.svgAttributes.width,
-                height: element.svgAttributes.height * -1,
-                borderColor: element.svgAttributes.stroke,
-                borderWidth: element.svgAttributes.strokeWidth,
-                borderOpacity: element.svgAttributes.strokeOpacity,
-                borderLineCap: element.svgAttributes.strokeLineCap,
-                color: element.svgAttributes.fill,
-                opacity: element.svgAttributes.fillOpacity,
-                xSkew: element.svgAttributes.skewX,
-                ySkew: element.svgAttributes.skewY,
-                rotate: element.svgAttributes.rotate,
-            });
+    async rect(element) {
+        if (!element.svgAttributes.fill && !element.svgAttributes.stroke)
+            return;
+        page.drawRectangle({
+            x: 0,
+            y: 0,
+            width: element.svgAttributes.width,
+            height: element.svgAttributes.height * -1,
+            borderColor: element.svgAttributes.stroke,
+            borderWidth: element.svgAttributes.strokeWidth,
+            borderOpacity: element.svgAttributes.strokeOpacity,
+            borderLineCap: element.svgAttributes.strokeLineCap,
+            color: element.svgAttributes.fill,
+            opacity: element.svgAttributes.fillOpacity,
+            matrix: element.svgAttributes.matrix,
+            clipSpaces: element.svgAttributes.clipSpaces,
         });
     },
-    ellipse(element) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
-            page.drawEllipse({
-                x: element.svgAttributes.cx,
-                y: element.svgAttributes.cy,
-                xScale: element.svgAttributes.rx,
-                yScale: element.svgAttributes.ry,
-                borderColor: element.svgAttributes.stroke,
-                borderWidth: element.svgAttributes.strokeWidth,
-                borderOpacity: element.svgAttributes.strokeOpacity,
-                borderLineCap: element.svgAttributes.strokeLineCap,
-                color: element.svgAttributes.fill,
-                opacity: element.svgAttributes.fillOpacity,
-                rotate: element.svgAttributes.rotate,
-            });
+    async ellipse(element) {
+        page.drawEllipse({
+            x: element.svgAttributes.cx || 0,
+            y: -(element.svgAttributes.cy || 0),
+            xScale: element.svgAttributes.rx,
+            yScale: element.svgAttributes.ry,
+            borderColor: element.svgAttributes.stroke,
+            borderWidth: element.svgAttributes.strokeWidth,
+            borderOpacity: element.svgAttributes.strokeOpacity,
+            borderLineCap: element.svgAttributes.strokeLineCap,
+            color: element.svgAttributes.fill,
+            opacity: element.svgAttributes.fillOpacity,
+            matrix: element.svgAttributes.matrix,
+            clipSpaces: element.svgAttributes.clipSpaces,
         });
     },
-    circle(element) {
-        return (0, tslib_1.__awaiter)(this, void 0, void 0, function* () {
-            return runnersToPage(page, options).ellipse(element);
-        });
+    async circle(element) {
+        return runnersToPage(page, options).ellipse(element);
     },
 });
-const transform = (converter, name, args) => {
-    switch (name) {
-        case 'scaleX':
-            return transform(converter, 'scale', [args[0], 0]);
-        case 'scaleY':
-            return transform(converter, 'scale', [0, args[0]]);
-        case 'scale':
-            const [xScale, yScale = xScale] = args;
-            return {
-                point: (x, y) => converter.point(x * xScale, y * yScale),
-                size: (w, h) => converter.size(w * xScale, h * yScale),
-            };
-        case 'translateX':
-            return transform(converter, 'translate', [args[0], 0]);
-        case 'translateY':
-            return transform(converter, 'translate', [0, args[0]]);
-        case 'translate':
-            const [dx, dy = dx] = args;
-            return {
-                point: (x, y) => converter.point(x + dx, y + dy),
-                size: converter.size,
-            };
-        case 'rotate': {
-            if (args.length > 1) {
-                const [a, x, y = x] = args;
-                let tempResult = transform(converter, 'translate', [x, y]);
-                tempResult = transform(tempResult, 'rotate', [a]);
-                return transform(tempResult, 'translate', [-x, -y]);
-            }
-            else {
-                const [a] = args;
-                const angle = (0, rotations_1.degreesToRadians)(a);
-                return {
-                    point: (x, y) => converter.point(x * Math.cos(angle) - y * Math.sin(angle), y * Math.cos(angle) + x * Math.sin(angle)),
-                    size: converter.size,
-                };
-            }
-        }
-        case 'matrix': {
-            const [scaleX, skewY, skewX, scaleY, translateX, translateY] = args;
-            return {
-                point: (x, y) => converter.point(x * scaleX + y * skewX + translateX, x * skewY + y * scaleY + translateY),
-                size: (w, h) => converter.size(w * scaleX, h * scaleY),
-            };
-        }
-        case 'skewX': {
-            const angle = (0, rotations_1.degreesToRadians)(args[0]);
-            return {
-                point: (x, y) => converter.point((1 + x) * Math.tan(angle), y),
-                size: converter.size,
-            };
-        }
-        case 'skewY': {
-            const angle = (0, rotations_1.degreesToRadians)(args[0]);
-            return {
-                point: (x, y) => converter.point(x, (1 + y) * Math.tan(angle)),
-                size: converter.size,
-            };
-        }
-        default: {
-            console.log('transformation unsupported:', name);
-            return converter;
-        }
-    }
-};
 const styleOrAttribute = (attributes, style, attribute, def) => {
     const value = style[attribute] || attributes[attribute];
     if (!value && typeof def !== 'undefined')
@@ -729,8 +249,8 @@ const parseColor = (color, inherited) => {
         alpha: parsedColor.alpha ? parsedColor.alpha + '' : undefined,
     };
 };
-const parseAttributes = (element, inherited, converter) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+const parseAttributes = (element, inherited, matrix) => {
+    var _a, _b, _c, _d;
     const attributes = element.attributes;
     const style = parseStyles(attributes.style);
     const widthRaw = styleOrAttribute(attributes, style, 'width', '');
@@ -786,7 +306,6 @@ const parseAttributes = (element, inherited, converter) => {
         dominantBaseline: attributes['dominant-baseline'],
         preserveAspectRatio: attributes.preserveAspectRatio,
     };
-    let newConverter = converter;
     let transformList = attributes.transform || '';
     // Handle transformations set as direct attributes
     [
@@ -805,28 +324,11 @@ const parseAttributes = (element, inherited, converter) => {
             transformList = attributes[name] + ' ' + transformList;
         }
     });
-    // skewX, skewY, rotate and scale are handled by the pdf-lib
-    ['skewX', 'skewY', 'rotate'].forEach((name) => {
-        var _a;
-        if (attributes[name]) {
-            const d = (_a = attributes[name].match(/-?(\d+\.?|\.)\d*/)) === null || _a === void 0 ? void 0 : _a[0];
-            if (d !== undefined) {
-                svgAttributes[name] = {
-                    angle: parseInt(d, 10),
-                    type: rotations_1.RotationTypes.Degrees,
-                };
-            }
-        }
-    });
-    if (attributes.scale) {
-        const d = (_e = attributes.scale.match(/-?(\d+\.?|\.)\d*/)) === null || _e === void 0 ? void 0 : _e[0];
-        if (d !== undefined)
-            svgAttributes.scale = parseInt(d, 10);
-    }
     // Convert x/y as if it was a translation
     if (x || y) {
         transformList = transformList + `translate(${x || 0} ${y || 0}) `;
     }
+    let newMatrix = matrix;
     // Apply the transformations
     if (transformList) {
         const regexTransform = /(\w+)\((.+?)\)/g;
@@ -837,295 +339,38 @@ const parseAttributes = (element, inherited, converter) => {
                 .split(/\s*,\s*|\s+/)
                 .filter((value) => value.length > 0)
                 .map((value) => parseFloat(value));
-            const currentConverter = newConverter;
-            newConverter = transform(newConverter, name, args);
-            const xAxisVector = (0, maths_1.minus)(currentConverter.point(0, 0), currentConverter.point(1, 0));
-            const xAxisVectorPostTransform = (0, maths_1.minus)(newConverter.point(0, 0), newConverter.point(1, 0));
-            // matrix transform may also represent rotations: https://www.w3.org/TR/SVGTiny12/coords.html
-            if (name === 'rotate' || name === 'matrix') {
-                // transformations over x and y axis might change the page coord direction
-                const { width: xDirection, height: yDirection } = currentConverter.size(1, 1);
-                const rotationAdded = name === 'rotate' ? args[0] : (0, rotations_1.radiansToDegrees)((0, maths_1.angle)(xAxisVectorPostTransform, xAxisVector));
-                // the page Y coord is inverted so the angle rotation is inverted too
-                const pageYDirection = -1;
-                newInherited.rotation = (0, rotations_1.degrees)(pageYDirection * rotationAdded * Math.sign(xDirection * yDirection) +
-                    (((_f = inherited.rotation) === null || _f === void 0 ? void 0 : _f.angle) || 0));
-                svgAttributes.rotate = newInherited.rotation;
-            }
+            newMatrix = combineTransformation(newMatrix, name, args);
             parsed = regexTransform.exec(transformList);
         }
     }
-    // x and y were already transformed into a translation. The new reference point is now 0,0
-    const { x: newX, y: newY } = newConverter.point(0, 0);
-    svgAttributes.x = newX;
-    svgAttributes.y = newY;
+    svgAttributes.x = x;
+    svgAttributes.y = y;
     if (attributes.cx || attributes.cy) {
-        const { x: newCX, y: newCY } = newConverter.point(cx || 0, cy || 0);
-        svgAttributes.cx = newCX;
-        svgAttributes.cy = newCY;
+        svgAttributes.cx = cx;
+        svgAttributes.cy = cy;
     }
     if (attributes.rx || attributes.ry || attributes.r) {
-        const { width: newRX, height: newRY } = newConverter.size(rx || 0, ry || 0);
-        svgAttributes.rx = newRX;
-        svgAttributes.ry = newRY;
+        svgAttributes.rx = rx;
+        svgAttributes.ry = ry;
     }
     if (attributes.x1 || attributes.y1) {
-        const { x: newX1, y: newY1 } = newConverter.point(x1 || 0, y1 || 0);
-        svgAttributes.x1 = newX1;
-        svgAttributes.y1 = newY1;
+        svgAttributes.x1 = x1;
+        svgAttributes.y1 = y1;
     }
     if (attributes.x2 || attributes.y2) {
-        const { x: newX2, y: newY2 } = newConverter.point(x2 || 0, y2 || 0);
-        svgAttributes.x2 = newX2;
-        svgAttributes.y2 = newY2;
+        svgAttributes.x2 = x2;
+        svgAttributes.y2 = y2;
     }
     if (attributes.width || attributes.height) {
-        const size = newConverter.size(width !== null && width !== void 0 ? width : inherited.width, height !== null && height !== void 0 ? height : inherited.height);
-        svgAttributes.width = size.width;
-        svgAttributes.height = size.height;
+        svgAttributes.width = width !== null && width !== void 0 ? width : inherited.width;
+        svgAttributes.height = height !== null && height !== void 0 ? height : inherited.height;
     }
-    // We convert all the points from the path
     if (attributes.d) {
-        const { x: xOrigin, y: yOrigin } = newConverter.point(0, 0);
-        // these are the x and y coordinates relative to the svg space, therefore these values weren't parsed by any converter. Each instruction will left the cursor on new position
-        let currentX = 0;
-        let currentY = 0;
-        svgAttributes.d = (_g = attributes.d) === null || _g === void 0 ? void 0 : _g.replace(/(l|m|s|t|q|c|z|a|v|h)([0-9,e\s.-]*)/gi, (command) => {
-            var _a, _b;
-            const letter = (_a = command.match(/[a-z]/i)) === null || _a === void 0 ? void 0 : _a[0];
-            if ((letter === null || letter === void 0 ? void 0 : letter.toLocaleLowerCase()) === 'z')
-                return letter;
-            // const params = command.match(/([0-9e.-]+)/ig)?.filter(m => m !== '')//.map(v => parseFloat(v))
-            const params = (_b = command
-                .match(/(-?[0-9]+\.[0-9]+(e[+-]?[0-9]+)?)|(-?\.[0-9]+(e[+-]?[0-9]+)?)|(-?[0-9]+)/gi)) === null || _b === void 0 ? void 0 : _b.filter((m) => m !== ''); // .map(v => parseFloat(v))
-            if (!params)
-                return letter || '';
-            switch (letter === null || letter === void 0 ? void 0 : letter.toLocaleLowerCase()) {
-                case 'm':
-                case 'l': {
-                    const groupedParams = groupBy(params, 2);
-                    return groupedParams
-                        .map((pair, pairIndex) => {
-                        const [x, y] = pair;
-                        const xReal = parseFloatValue(x, inherited.width) || 0;
-                        const yReal = parseFloatValue(y, innerHeight) || 0;
-                        if (letter === letter.toLowerCase()) {
-                            currentX += xReal;
-                            currentY += yReal;
-                        }
-                        else {
-                            currentX = xReal;
-                            currentY = yReal;
-                        }
-                        const point = newConverter.point(currentX, currentY);
-                        return ((pairIndex > 0 || letter.toUpperCase() === 'L' ? 'L' : 'M') +
-                            [point.x - xOrigin, point.y - yOrigin].join(','));
-                    })
-                        .join(' ');
-                }
-                case 'v': {
-                    return params
-                        .map((value) => {
-                        const coord = parseFloatValue(value) || 0;
-                        if (letter === letter.toLowerCase()) {
-                            currentY += coord;
-                        }
-                        else {
-                            currentY = coord;
-                        }
-                        const point = newConverter.point(currentX, currentY);
-                        // we can't use 'v' as the final command because rotations might require a different command after the path parsing
-                        // for instance, a 90 degree rotation would turn a 'v' into an 'h' command
-                        return `L${point.x - xOrigin} ${point.y - yOrigin}`;
-                    })
-                        .join(' ');
-                }
-                case 'h': {
-                    return params
-                        .map((value) => {
-                        const coord = parseFloatValue(value) || 0;
-                        if (letter === letter.toLowerCase()) {
-                            currentX += coord;
-                        }
-                        else {
-                            currentX = coord;
-                        }
-                        const point = newConverter.point(currentX, currentY);
-                        // we can't use 'h' as the final command because rotations might require a different command after the path parsing
-                        // for instance, a 90 degree rotation would turn a 'h' into an 'v' command
-                        return `L${point.x - xOrigin} ${point.y - yOrigin}`;
-                    })
-                        .join(' ');
-                }
-                case 'a': {
-                    const groupedParams = groupBy(params, 7);
-                    return groupedParams
-                        .map((p) => {
-                        const [rxPixel, ryPixel, xAxisRotation = '0', largeArc = '0', sweepFlag = '0', xPixel, yPixel,] = p;
-                        const realRx = parseFloatValue(rxPixel, inherited.width) || 0;
-                        const realRy = parseFloatValue(ryPixel, inherited.height) || 0;
-                        const realX = parseFloatValue(xPixel, inherited.width) || 0;
-                        const realY = parseFloatValue(yPixel, inherited.height) || 0;
-                        const { width: newRx, height: newRy } = newConverter.size(realRx, realRy);
-                        let point;
-                        if (letter === letter.toLowerCase()) {
-                            currentX += realX;
-                            currentY += realY;
-                        }
-                        else {
-                            currentX = realX;
-                            currentY = realY;
-                        }
-                        point = newConverter.point(currentX, currentY);
-                        // transformations over x and y axis might change the page coord direction
-                        const { width: xDirection, height: yDirection } = newConverter.size(1, 1);
-                        // -1 is the default direction
-                        const pageYDirection = -1 * Math.sign(xDirection * yDirection);
-                        const oppositeSweepFlag = sweepFlag === '0' ? '1' : '0';
-                        return [
-                            letter.toUpperCase(),
-                            newRx,
-                            newRy,
-                            xAxisRotation,
-                            largeArc,
-                            pageYDirection === -1 ? oppositeSweepFlag : sweepFlag,
-                            point.x - xOrigin,
-                            point.y - yOrigin,
-                        ].join(' ');
-                    })
-                        .join(' ');
-                }
-                case 'c': {
-                    const groupedParams = groupBy(params, 6);
-                    const result = groupedParams
-                        .map(([c1X, c1Y, c2X, c2Y, xString, yString]) => [
-                        parseFloatValue(c1X, inherited.width) || 0,
-                        parseFloatValue(c1Y, inherited.height) || 0,
-                        parseFloatValue(c2X, inherited.width) || 0,
-                        parseFloatValue(c2Y, inherited.height) || 0,
-                        parseFloatValue(xString, inherited.width) || 0,
-                        parseFloatValue(yString, inherited.height) || 0,
-                    ])
-                        .map(([c1X, c1Y, c2X, c2Y, xReal, yReal]) => {
-                        let controlPoint1X;
-                        let controlPoint1Y;
-                        let controlPoint2X;
-                        let controlPoint2Y;
-                        if (letter === letter.toLowerCase()) {
-                            controlPoint1X = currentX + c1X;
-                            controlPoint1Y = currentY + c1Y;
-                            controlPoint2X = currentX + c2X;
-                            controlPoint2Y = currentY + c2Y;
-                            currentX += xReal;
-                            currentY += yReal;
-                        }
-                        else {
-                            controlPoint1X = c1X;
-                            controlPoint1Y = c1Y;
-                            controlPoint2X = c2X;
-                            controlPoint2Y = c2Y;
-                            currentX = xReal;
-                            currentY = yReal;
-                        }
-                        const controlPoint1 = newConverter.point(controlPoint1X, controlPoint1Y);
-                        const controlPoint2 = newConverter.point(controlPoint2X, controlPoint2Y);
-                        const point = newConverter.point(currentX, currentY);
-                        return [
-                            controlPoint1.x - xOrigin,
-                            controlPoint1.y - yOrigin,
-                            controlPoint2.x - xOrigin,
-                            controlPoint2.y - yOrigin,
-                            point.x - xOrigin,
-                            point.y - yOrigin,
-                        ].join(',');
-                    })
-                        .join(' ');
-                    return (letter === null || letter === void 0 ? void 0 : letter.toUpperCase()) + '' + result;
-                }
-                case 's': {
-                    const groupedParams = groupBy(params, 4);
-                    const result = groupedParams
-                        // the control point 1 is omitted because it's the reflection of c2
-                        .map(([c2X, c2Y, xString, yString]) => [
-                        parseFloatValue(c2X, inherited.width) || 0,
-                        parseFloatValue(c2Y, inherited.height) || 0,
-                        parseFloatValue(xString, inherited.width) || 0,
-                        parseFloatValue(yString, inherited.height) || 0,
-                    ])
-                        .map(([c2X, c2Y, xReal, yReal]) => {
-                        let controlPoint2X;
-                        let controlPoint2Y;
-                        if (letter === letter.toLowerCase()) {
-                            controlPoint2X = currentX + c2X;
-                            controlPoint2Y = currentY + c2Y;
-                            currentX += xReal;
-                            currentY += yReal;
-                        }
-                        else {
-                            controlPoint2X = c2X;
-                            controlPoint2Y = c2Y;
-                            currentX = xReal;
-                            currentY = yReal;
-                        }
-                        const controlPoint2 = newConverter.point(controlPoint2X, controlPoint2Y);
-                        const point = newConverter.point(currentX, currentY);
-                        return [
-                            controlPoint2.x - xOrigin,
-                            controlPoint2.y - yOrigin,
-                            point.x - xOrigin,
-                            point.y - yOrigin,
-                        ].join(',');
-                    })
-                        .join(' ');
-                    return (letter === null || letter === void 0 ? void 0 : letter.toUpperCase()) + '' + result;
-                }
-                default: {
-                    const groupedParams = groupBy(params, 2);
-                    const result = groupedParams
-                        .map(([xString, yString]) => [
-                        parseFloatValue(xString, inherited.width) || 0,
-                        parseFloatValue(yString, inherited.height) || 0,
-                    ])
-                        .map(([xReal, yReal]) => {
-                        if (letter === letter.toLowerCase()) {
-                            currentX += xReal;
-                            currentY += yReal;
-                        }
-                        else {
-                            currentX = xReal;
-                            currentY = yReal;
-                        }
-                        const point = newConverter.point(currentX, currentY);
-                        return [point.x - xOrigin, point.y - yOrigin].join(',');
-                    })
-                        .join(' ');
-                    return (letter === null || letter === void 0 ? void 0 : letter.toUpperCase()) + '' + result;
-                }
-            }
-        });
-    }
-    if (attributes.viewBox) {
-        const viewBox = parseViewBox(attributes.viewBox);
-        const size = {
-            width: width || inherited.viewBox.width,
-            height: height || inherited.viewBox.height,
-        };
-        const localConverter = getConverterWithAspectRatio(size, viewBox, attributes.preserveAspectRatio);
-        const oldConverter = newConverter;
-        newConverter = {
-            point: (px, py) => {
-                const { x: localX, y: localY } = localConverter.point(px, py);
-                return oldConverter.point(localX, localY);
-            },
-            size: (w, h) => {
-                const { width: localWidth, height: localHeight } = localConverter.size(w, h);
-                return oldConverter.size(localWidth, localHeight);
-            },
-        };
+        newMatrix = combineTransformation(newMatrix, 'scale', [1, -1]);
+        svgAttributes.d = attributes.d;
     }
-    // apply the converter only when there's a local fontSize instruction
     if (fontSizeRaw && newInherited.fontSize) {
-        newInherited.fontSize = newConverter.size(1, newInherited.fontSize).height;
+        newInherited.fontSize = newInherited.fontSize;
     }
     if (newInherited.fontFamily) {
         // Handle complex fontFamily like `"Linux Libertine O", serif`
@@ -1134,43 +379,13 @@ const parseAttributes = (element, inherited, converter) => {
             newInherited.fontFamily = inner[1] || inner[2];
     }
     if (newInherited.strokeWidth) {
-        const result = newConverter.size(newInherited.strokeWidth, newInherited.strokeWidth);
-        svgAttributes.strokeWidth = Math.max(Math.min(Math.abs(result.width), Math.abs(result.height)), 1);
+        svgAttributes.strokeWidth = newInherited.strokeWidth;
     }
     return {
         inherited: newInherited,
         svgAttributes,
-        converter: newConverter,
         tagName: element.tagName,
-    };
-};
-const getConverter = (box, viewBox) => {
-    const { width, height } = box;
-    const { x: xMin, y: yMin, width: viewWidth, height: viewHeight } = viewBox;
-    const converter = {
-        point: (xReal, yReal) => ({
-            x: ((xReal - xMin) / viewWidth) * (width || 0),
-            y: ((yReal - yMin) / viewHeight) * (height || 0),
-        }),
-        size: (wReal, hReal) => ({
-            width: (wReal / viewWidth) * (width || 0),
-            height: (hReal / viewHeight) * (height || 0),
-        }),
-    };
-    return converter;
-};
-const getConverterWithAspectRatio = (size, viewBox, preserveAspectRatio) => {
-    // explanation about how the svg attributes applies transformations to the child elements
-    // https://www.w3.org/TR/SVG/coords.html#ComputingAViewportsTransform
-    const { x, y, width, height } = getFittingRectangle(viewBox.width, viewBox.height, size.width, size.height, preserveAspectRatio);
-    const ratioConverter = getConverter({ width, height }, viewBox);
-    // We translate the drawing in the page when the aspect ratio is different, according to the preserveAspectRatio instructions.
-    return {
-        point: (xReal, yReal) => {
-            const P = ratioConverter.point(xReal, yReal);
-            return { x: P.x + x, y: P.y + y };
-        },
-        size: ratioConverter.size,
+        matrix: newMatrix,
     };
 };
 const getFittingRectangle = (originalWidth, originalHeight, targetWidth, targetHeight, preserveAspectRatio) => {
@@ -1208,16 +423,62 @@ const getFittingRectangle = (originalWidth, originalHeight, targetWidth, targetH
     })();
     return { x, y, width, height };
 };
-const parseHTMLNode = (node, inherited, converter) => {
+const getAspectRatioTransformation = (matrix, originalWidth, originalHeight, targetWidth, targetHeight, preserveAspectRatio) => {
+    const scaleX = targetWidth / originalWidth;
+    const scaleY = targetHeight / originalHeight;
+    const boxScale = combineTransformation(matrix, 'scale', [
+        scaleX,
+        scaleY
+    ]);
+    if (preserveAspectRatio === 'none') {
+        return {
+            clipBox: boxScale,
+            content: boxScale
+        };
+    }
+    // TODO: the following code works for the 'meet' param but not for the 'slice'
+    const scale = targetWidth > targetHeight ? scaleY : scaleX;
+    const dx = targetWidth - (originalWidth * scale);
+    const dy = targetHeight - (originalHeight * scale);
+    const [x, y] = (() => {
+        switch (preserveAspectRatio) {
+            case 'xMinYMin':
+                return [0, 0];
+            case 'xMidYMin':
+                return [dx / 2, 0];
+            case 'xMaxYMin':
+                return [dx, dy / 2];
+            case 'xMinYMid':
+                return [0, dy];
+            case 'xMaxYMid':
+                return [dx, dy / 2];
+            case 'xMinYMax':
+                return [0, dy];
+            case 'xMidYMax':
+                return [dx / 2, dy];
+            case 'xMaxYMax':
+                return [dx, dy];
+            case 'xMidYMid':
+            default:
+                return [dx / 2, dy / 2];
+        }
+    })();
+    const contentTransform = combineTransformation(combineTransformation(matrix, 'translate', [x, y]), 'scale', [scale]);
+    return {
+        clipBox: boxScale,
+        content: contentTransform
+    };
+};
+const parseHTMLNode = (node, inherited, matrix, clipSpaces) => {
     if (node.nodeType === node_html_better_parser_1.NodeType.COMMENT_NODE)
         return [];
     else if (node.nodeType === node_html_better_parser_1.NodeType.TEXT_NODE)
         return [];
     else if (node.tagName === 'g') {
-        return parseGroupNode(node, inherited, converter);
+        return parseGroupNode(node, inherited, matrix, clipSpaces);
     }
     else if (node.tagName === 'svg') {
-        return parseSvgNode(node, inherited, converter);
+        return parseSvgNode(node, inherited, matrix, clipSpaces);
     }
     else {
         if (node.tagName === 'polygon') {
@@ -1225,36 +486,69 @@ const parseHTMLNode = (node, inherited, converter) => {
             node.attributes.d = `M${node.attributes.points}Z`;
             delete node.attributes.points;
         }
-        const attributes = parseAttributes(node, inherited, converter);
-        const svgAttributes = Object.assign(Object.assign({}, attributes.inherited), attributes.svgAttributes);
+        const attributes = parseAttributes(node, inherited, matrix);
+        const svgAttributes = {
+            ...attributes.inherited,
+            ...attributes.svgAttributes,
+            matrix: attributes.matrix,
+            clipSpaces
+        };
         Object.assign(node, { svgAttributes });
         return [node];
     }
 };
-const parseSvgNode = (node, inherited, converter) => {
+const parseSvgNode = (node, inherited, matrix, clipSpaces) => {
     var _a, _b;
     // if the width/height aren't set, the svg will have the same dimension as the current drawing space
     (_a = node.attributes.width) !== null && _a !== void 0 ? _a : node.setAttribute('width', inherited.viewBox.width + '');
     (_b = node.attributes.height) !== null && _b !== void 0 ? _b : node.setAttribute('height', inherited.viewBox.height + '');
-    const attributes = parseAttributes(node, inherited, converter);
+    const attributes = parseAttributes(node, inherited, matrix);
     const result = [];
     const viewBox = node.attributes.viewBox
         ? parseViewBox(node.attributes.viewBox)
         : node.attributes.width && node.attributes.height
             ? parseViewBox(`0 0 ${node.attributes.width} ${node.attributes.height}`)
             : inherited.viewBox;
-    const svgRect = new elements_1.Rectangle(new elements_1.Point(attributes.converter.point(viewBox.x, viewBox.y)), new elements_1.Point(attributes.converter.point(viewBox.x + viewBox.width, viewBox.y + viewBox.height)));
+    const x = parseFloat(node.attributes.x) || 0;
+    const y = parseFloat(node.attributes.y) || 0;
+    let newMatrix = combineTransformation(matrix, 'translate', [x, y]);
+    const { clipBox: clipBoxTransform, content: contentTransform } = getAspectRatioTransformation(newMatrix, viewBox.width, viewBox.height, parseFloat(node.attributes.width), parseFloat(node.attributes.height), node.attributes.preserveAspectRatio || 'xMidYMid');
+    const topLeft = applyTransformation(clipBoxTransform, {
+        x: 0,
+        y: 0,
+    });
+    const topRight = applyTransformation(clipBoxTransform, {
+        x: viewBox.width,
+        y: 0,
+    });
+    const bottomRight = applyTransformation(clipBoxTransform, {
+        x: viewBox.width,
+        y: -viewBox.height,
+    });
+    const bottomLeft = applyTransformation(clipBoxTransform, {
+        x: 0,
+        y: -viewBox.height,
+    });
+    const baseClipSpace = {
+        topLeft,
+        topRight,
+        bottomRight,
+        bottomLeft
+    };
+    // TODO: maybe this is the correct transformation
+    // newMatrix = combineTransformation(newMatrix, 'translate', [-baseClipSpace.xMin, -baseClipSpace.yMin])
+    newMatrix = combineTransformation(contentTransform, 'translate', [-viewBox.x, -viewBox.y]);
     node.childNodes.forEach((child) => {
-        const parsedNodes = parseHTMLNode(child, Object.assign(Object.assign({}, attributes.inherited), { viewBox }), attributes.converter).map((el) => cropSvgElement(svgRect, el));
+        const parsedNodes = parseHTMLNode(child, { ...attributes.inherited, viewBox }, newMatrix, [...clipSpaces, baseClipSpace]);
         result.push(...parsedNodes);
     });
     return result;
 };
-const parseGroupNode = (node, inherited, converter) => {
-    const attributes = parseAttributes(node, inherited, converter);
+const parseGroupNode = (node, inherited, matrix, clipSpaces) => {
+    const attributes = parseAttributes(node, inherited, matrix);
     const result = [];
     node.childNodes.forEach((child) => {
-        result.push(...parseHTMLNode(child, attributes.inherited, attributes.converter));
+        result.push(...parseHTMLNode(child, attributes.inherited, attributes.matrix, clipSpaces));
     });
     return result;
 };
@@ -1281,22 +575,21 @@ const parseViewBox = (viewBox) => {
         height: heightViewBox,
     };
 };
-const parse = (svg, { width, height, x, y, fontSize }, size, converter) => {
+const parse = (svg, { width, height, fontSize }, size, matrix) => {
     const htmlElement = (0, node_html_better_parser_1.parse)(svg).firstChild;
     if (width)
         htmlElement.setAttribute('width', width + '');
     if (height)
         htmlElement.setAttribute('height', height + '');
-    if (x !== undefined)
-        htmlElement.setAttribute('x', x + '');
-    if (y !== undefined)
-        htmlElement.setAttribute('y', size.height - y + '');
     if (fontSize)
         htmlElement.setAttribute('font-size', fontSize + '');
     // TODO: what should be the default viewBox?
-    return parseHTMLNode(htmlElement, Object.assign(Object.assign({}, size), { viewBox: parseViewBox(htmlElement.attributes.viewBox || '0 0 1 1') }), converter);
+    return parseHTMLNode(htmlElement, {
+        ...size,
+        viewBox: parseViewBox(htmlElement.attributes.viewBox || '0 0 1 1'),
+    }, matrix, []);
 };
-const drawSvg = (page, svg, options) => (0, tslib_1.__awaiter)(void 0, void 0, void 0, function* () {
+const drawSvg = async (page, svg, options) => {
     if (!svg)
         return;
     const size = page.getSize();
@@ -1321,18 +614,41 @@ const drawSvg = (page, svg, options) => (0, tslib_1.__awaiter)(void 0, void 0, v
             .map(([key, val]) => `${key}:${val};`)
             .join(''));
     }
-    // The y axis of the page is reverted
-    const defaultConverter = {
-        point: (xP, yP) => ({ x: xP, y: size.height - yP }),
-        size: (w, h) => ({ width: w, height: h }),
-    };
+    const baseTransformation = [1, 0, 0, 1, options.x || 0, options.y || 0];
     const runners = runnersToPage(page, options);
-    const elements = parse(firstChild.outerHTML, options, size, defaultConverter);
-    yield elements.reduce((prev, elt) => (0, tslib_1.__awaiter)(void 0, void 0, void 0, function* () {
+    const elements = parse(firstChild.outerHTML, options, size, baseTransformation);
+    await elements.reduce(async (prev, elt) => {
         var _a;
-        yield prev;
+        await prev;
+        // uncomment these lines to draw the clipSpaces
+        // elt.svgAttributes.clipSpaces.forEach(space => {
+        //   page.drawLine({
+        //     start: space.topLeft,
+        //     end: space.topRight,
+        //     color: parseColor('#000000')?.rgb,
+        //     thickness: 1
+        //   })
+        //   page.drawLine({
+        //     start: space.topRight,
+        //     end: space.bottomRight,
+        //     color: parseColor('#000000')?.rgb,
+        //     thickness: 1
+        //   })
+        //   page.drawLine({
+        //     start: space.bottomRight,
+        //     end: space.bottomLeft,
+        //     color: parseColor('#000000')?.rgb,
+        //     thickness: 1
+        //   })
+        //   page.drawLine({
+        //     start: space.bottomLeft,
+        //     end: space.topLeft,
+        //     color: parseColor('#000000')?.rgb,
+        //     thickness: 1
+        //   })
+        // })
         return (_a = runners[elt.tagName]) === null || _a === void 0 ? void 0 : _a.call(runners, elt);
-    }), Promise.resolve());
-});
+    }, Promise.resolve());
+};
 exports.drawSvg = drawSvg;
 //# sourceMappingURL=svg.js.map