fix: textDecoration should compatible with transform (#640)

Author: Jackie1210

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>' : '')
+  )
 }

src/text/index.ts

@@ -681,6 +681,7 @@ export default async function* buildTextNodes(
             width: deco[3],
             ascender: deco[2],
             clipPathId,
+            matrix,
           },
           parentStyle
         )

test/__image_snapshots__/text-decoration-test-tsx-test-text-decoration-test-tsx-text-decoration-should-work-correctly-with-text-decoration-and-transform-1-snap.png

@@ -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()
+  })
 })