fix: textDecoration should compatible with transform (#640)

vercel · Oct 6, 2024 · 618d565 · 618d565
1 parent f7b0254
commit 618d565
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 11 deletions.
diff --git a/src/builder/text-decoration.ts b/src/builder/text-decoration.ts
@@ -7,12 +7,14 @@ export default function buildDecoration(
  top,
  ascender,
  clipPathId,
+ matrix,
  }: {
  width: number
  left: number
  top: number
  ascender: number
  clipPathId?: string
+ matrix?: string
  },
  style: Record<string, any>
 ) {
@@ -43,15 +45,19 @@ export default function buildDecoration(
  ? `0 ${height * 2}`
  : undefined
 
- return buildXMLString('line', {
- x1: left,
- y1: y,
- x2: left + width,
- y2: y,
- stroke: textDecorationColor || color,
- 'stroke-width': height,
- 'stroke-dasharray': dasharray,
- 'stroke-linecap': textDecorationStyle === 'dotted' ? 'round' : 'square',
- 'clip-path': clipPathId ? `url(#${clipPathId})` : undefined,
- })
+ return (
+ (clipPathId ? `<g clip-path="url(#${clipPathId})">` : '') +
+ buildXMLString('line', {
+ x1: left,
+ y1: y,
+ x2: left + width,
+ y2: y,
+ stroke: textDecorationColor || color,
+ 'stroke-width': height,
+ 'stroke-dasharray': dasharray,
+ 'stroke-linecap': textDecorationStyle === 'dotted' ? 'round' : 'square',
+ transform: matrix,
+ }) +
+ (clipPathId ? '</g>' : '')
+ )
 }
diff --git a/src/text/index.ts b/src/text/index.ts
@@ -681,6 +681,7 @@ export default async function* buildTextNodes(
  width: deco[3],
  ascender: deco[2],
  clipPathId,
+ matrix,
  },
  parentStyle
  )

diff --git a/...-decoration-should-work-correctly-with-text-decoration-and-transform-1-snap.png b/...-decoration-should-work-correctly-with-text-decoration-and-transform-1-snap.png
diff --git a/test/text-decoration.test.tsx b/test/text-decoration.test.tsx
@@ -152,4 +152,39 @@ describe('Text Decoration', () => {
  )
  expect(toImage(svg, 200)).toMatchImageSnapshot()
  })
+
+ it('Should work correctly with `text-decoration` and `transform`', async () => {
+ const svg = await satori(
+ <div
+ style={{
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ padding: 10,
+ backgroundColor: '#fff',
+ fontSize: 32,
+ }}
+ >
+ <div
+ style={{
+ display: 'flex',
+ transform: 'translate(5px, 5px)',
+ padding: 10,
+ textDecoration: 'underline',
+ }}
+ >
+ lynn
+ </div>
+ </div>,
+ {
+ width: 100,
+ height: 100,
+ fonts,
+ loadAdditionalAsset: (languageCode: string, segment: string) => {
+ return loadDynamicAsset(languageCode, segment) as any
+ },
+ }
+ )
+ expect(toImage(svg, 100)).toMatchImageSnapshot()
+ })
 })