diff --git a/src/builder/mask-image.ts b/src/builder/mask-image.ts index 6bd72c69..46a24112 100644 --- 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/test/__image_snapshots__/mask-image-test-tsx-test-mask-image-test-tsx-mask-should-support-mask-image-on-positioned-elements-1-snap.png b/test/__image_snapshots__/mask-image-test-tsx-test-mask-image-test-tsx-mask-should-support-mask-image-on-positioned-elements-1-snap.png new file mode 100644 index 00000000..c66aa945 Binary files /dev/null and b/test/__image_snapshots__/mask-image-test-tsx-test-mask-image-test-tsx-mask-should-support-mask-image-on-positioned-elements-1-snap.png differ diff --git a/test/mask-image.test.tsx b/test/mask-image.test.tsx index 5afafa6e..488274a0 100644 --- 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( +
+
+
, + { width: 120, height: 120, fonts } + ) + expect(toImage(svg, 120)).toMatchImageSnapshot() + }) })