From 618d565edb83270d9b829edc430788032e6f2bc6 Mon Sep 17 00:00:00 2001
From: Lynnnnnnxx <jcignorance@outlook.com>
Date: Sun, 6 Oct 2024 22:01:40 +0800
Subject: [PATCH] fix: textDecoration should compatible with transform (#640)

---
 src/builder/text-decoration.ts                |  28 ++++++++------
 src/text/index.ts                             |   1 +
 ...h-text-decoration-and-transform-1-snap.png | Bin 0 -> 1190 bytes
 test/text-decoration.test.tsx                 |  35 ++++++++++++++++++
 4 files changed, 53 insertions(+), 11 deletions(-)
 create mode 100644 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

diff --git a/src/builder/text-decoration.ts b/src/builder/text-decoration.ts
index e53e98c7..ea441ac3 100644
--- 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
index 9eb199c8..7149a84b 100644
--- 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/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 b/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
new file mode 100644
index 0000000000000000000000000000000000000000..c7fc3bcab3bbff9ac242abb41593cf0f423acdc2
GIT binary patch
literal 1190
zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$}jSV9E7#aSW-L^LFOl(8nGEt=$|A
z92xEmE)5+F7VYInjQJf{I)Fj~f((KRN(@R4E(|UkqQi6EW~H2z+tXH@{;cjf$MoF4
zrL}jj>TdopJ-LaEQ_<P!!~_8&l@=aqFds*^UMbDh*VmVuxpv*UTbC|Pa$j_IJC|nH
zAwPeATch2(cW>4??enLjWrCt&iU)_JkW*XB1V_auA3t8acmKZatbH<h?{{z7l%%Q3
z{Qdj)f7f#g3ol-~cFo49y1F{s?zkbt{QR68o_X@W?QLx<zdYWV9l!4Wy?bW&o6o$L
ze*Tk7qvc6uUU+!8+)P<Hxm!Pf?sWgVX8rpAvmbo36cZEsv);6G)v8rH`OXP@@+drh
z^X5#^{<P_*`fuO4^X0^wCr^$P-A}KtzpwRwkGI#!b?etlpZwh7bmHvU-nVbwRD8L3
z;ra9Q{$nfmF7I<w?zgKdc>BItU{cVgGv}kHE%jwOdFS4}Z!he%{A)OF-ny0L79O4<
zed6feN2PHA9E=$uQx>(ix8IxBE>~Yu^XB3Y4=zPUFZq4v|Lt^p`>C(5Z`LK|ATM8|
z+abD&2k+gRCt7zO7y?t@GfymBFX7o*Z?B)xq7W%AE-u%rZhfMr{!7$_sn^7sHnj$_
zpUk~*yU^!P&1GBnrzi8cckbD<<<99a@j2FRChJ0f7JhDW<9Nn;hF@W+$+hZ<XP!Py
z?LT%}G=ux#Morb%%HLUz*IeD(eo9!{DPYrtABwlG&ravcY-yNsDdD|tt=|C_?q6;f
z&a17+xXY|o-g9O_7U#^cE~EY5CDu+}_dRk&i^$sdyFJfG+wRV1Iis{>_7^WFqwL^n
zNvU2pxtU9+%sRrZ5v~zEV@=?_T^=WRMD88%aGNjCU?j?)9=I*wbh6OfX)_(1(iVJR
zb2DmdnPOYa%5sE@XR+GSlvtG%Hm>{xm1GZ&Q$nYNJv2?3+!jx~8h5Vkl<0&Bk{Wv&
zC-x{RGVsTJWN1%slrZclo`2^zOv2OYRM^c!hh^P(D{5<V?|oNPG!Cd>R+gOH!k}VT
zH;>_SRe*NX_Y1yNs){ptCst>6J?Ar68N<jqv+<C$#K{?IEQ=MV?MevR$s}aNy!1Tp
z(tL)~kv7RbN|S8X#x$N0773YmL(yx0-Am~cwMU-rV~seN*vVV;-{yNR$D8)Qj;0T*
z=0A;YtzqNn5WMt#fA{^V`l3NUCiH*$u>3=Pec$v6mdc7L0o*J9KJUA=eZFFtc`hFx
zUru@X^~Le*Ygm@+hN*pA>SX7<W<^ux>2vo*r4*OyyJpM#YO0>D;hg>FtAC4I#}5Z;
fW?7v1|A%zRoF2gx%{`BR<qw0WtDnm{r-UW|)@26@

literal 0
HcmV?d00001

diff --git a/test/text-decoration.test.tsx b/test/text-decoration.test.tsx
index d096765e..8c7b2d0c 100644
--- 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()
+  })
 })