fix: positioned mask image (#566)

Resolves #565 --------- Co-authored-by: Shu Ding <[email protected]>
vercel · Jan 30, 2024 · 9bc47fd · 9bc47fd
1 parent 69e4bb7
commit 9bc47fd
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/src/builder/mask-image.ts b/src/builder/mask-image.ts
@@ -37,8 +37,8 @@ export default async function buildMaskImage(
     mask +=
       def +
       buildXMLString('rect', {
-        x: 0,
-        y: 0,
+        x: left,
+        y: top,
         width,
         height,
         fill: `url(#${_id})`,

diff --git a/...image-test-tsx-mask-should-support-mask-image-on-positioned-elements-1-snap.png b/...image-test-tsx-mask-should-support-mask-image-on-positioned-elements-1-snap.png
diff --git a/test/mask-image.test.tsx b/test/mask-image.test.tsx
@@ -209,4 +209,33 @@ describe('Mask-*', () => {
     )
     expect(toImage(svg, 100)).toMatchImageSnapshot()
   })
+
+  it('should support mask-image on positioned elements', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: 20,
+            left: 20,
+            height: 100,
+            width: 100,
+            display: 'flex',
+            background: 'green',
+            maskImage:
+              "url(data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' width='100' height='100' /%3E%3C/svg%3E)",
+            border: '1px solid red',
+          }}
+        ></div>
+      </div>,
+      { width: 120, height: 120, fonts }
+    )
+    expect(toImage(svg, 120)).toMatchImageSnapshot()
+  })
 })