fix(render): deformed SVG paths with chained smooth quadratic (T) commands (#3519)

Author: diegomura

.changeset/tidy-moons-shake.md

@@ -0,0 +1,5 @@
+---
+'@react-pdf/render': patch
+---
+
+Fix deformed SVG paths with chained smooth quadratic (T) commands by expanding them to explicit Q commands before handing them to pdfkit

packages/render/src/primitives/renderPath.ts

@@ -1,10 +1,74 @@
 import { SafePathNode } from '@react-pdf/layout';
+import absPath from 'abs-svg-path';
+import parsePath from 'parse-svg-path';
+
 import { Context } from '../types';
 
+/**
+ * pdfkit mishandles chained smooth quadratic commands (T): after drawing it
+ * reflects the control point a second time, so every T after the first uses a
+ * stale control point and curves render deformed. Expand T into explicit Q
+ * commands with the correct reflection before handing the path to pdfkit.
+ */
+type Segment = (string | number)[];
+
+const expandSmoothQuadratics = (d: string): string => {
+  const segments: Segment[] = absPath(parsePath(d));
+
+  let x = 0;
+  let y = 0;
+  let startX = 0;
+  let startY = 0;
+  let quadX: number | null = null;
+  let quadY: number | null = null;
+
+  const out = segments.map((segment: Segment) => {
+    let seg = segment;
+    const command = seg[0];
+
+    if (command === 'T') {
+      const cx = quadX === null ? x : 2 * x - quadX;
+      const cy = quadY === null ? y : 2 * y - quadY;
+      seg = ['Q', cx, cy, seg[1], seg[2]];
+      quadX = cx;
+      quadY = cy;
+    } else if (command === 'Q') {
+      quadX = seg[1] as number;
+      quadY = seg[2] as number;
+    } else {
+      quadX = null;
+      quadY = null;
+    }
+
+    if (command === 'M') {
+      startX = seg[1] as number;
+      startY = seg[2] as number;
+    }
+
+    if (command === 'H') {
+      x = seg[1] as number;
+    } else if (command === 'V') {
+      y = seg[1] as number;
+    } else if (command === 'Z') {
+      x = startX;
+      y = startY;
+    } else {
+      x = seg[seg.length - 2] as number;
+      y = seg[seg.length - 1] as number;
+    }
+
+    return seg;
+  });
+
+  return out.map((seg: Segment) => seg[0] + seg.slice(1).join(' ')).join('');
+};
+
 const renderPath = (ctx: Context, node: SafePathNode) => {
   const d = node.props?.d;
 
-  if (d) ctx.path(node.props.d);
+  if (!d) return;
+
+  ctx.path(/[Tt]/.test(d) ? expandSmoothQuadratics(d) : d);
 };
 
 export default renderPath;

packages/render/tests/primitives/renderPath.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, test } from 'vitest';
+
+import * as P from '@react-pdf/primitives';
+
+import createCTX from '../ctx';
+import renderPath from '../../src/primitives/renderPath';
+import { SafePathNode } from '@react-pdf/layout';
+
+const render = (d: string) => {
+  const ctx = createCTX();
+  const node: SafePathNode = { type: P.Path, props: { d }, style: {} };
+
+  renderPath(ctx, node);
+
+  return ctx.path.mock.calls;
+};
+
+describe('primitive renderPath', () => {
+  test('should not render empty path', () => {
+    const calls = render('');
+    expect(calls).toHaveLength(0);
+  });
+
+  test('should pass paths without smooth quadratics through untouched', () => {
+    const d = 'M10 10L20 20Q30 30 40 40Z';
+    expect(render(d)).toEqual([[d]]);
+  });
+
+  test('should expand chained T commands with reflected control points', () => {
+    expect(render('M0 0Q10 20 20 0T40 0T60 0')).toEqual([
+      ['M0 0Q10 20 20 0Q30 -20 40 0Q50 20 60 0'],
+    ]);
+  });
+
+  test('should use current point as control when T does not follow Q', () => {
+    expect(render('M0 0L10 10T30 10')).toEqual([['M0 0L10 10Q10 10 30 10']]);
+  });
+
+  test('should absolutize relative t commands', () => {
+    expect(render('M0 0Q10 20 20 0t20 0')).toEqual([
+      ['M0 0Q10 20 20 0Q30 -20 40 0'],
+    ]);
+  });
+
+  test('should track current point through H, V and Z when expanding', () => {
+    expect(render('M0 0H10V10ZT20 20')).toEqual([['M0 0H10V10ZQ0 0 20 20']]);
+  });
+});