Skip to content

Commit

Permalink
fix: positioned mask image (#566)
Browse files Browse the repository at this point in the history
Resolves #565

---------

Co-authored-by: Shu Ding <g@shud.in>
  • Loading branch information
pjeweb and shuding authored Jan 30, 2024
1 parent 69e4bb7 commit 9bc47fd
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 2 deletions.
4 changes: 2 additions & 2 deletions src/builder/mask-image.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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})`,
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions test/mask-image.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
})
})

0 comments on commit 9bc47fd

Please sign in to comment.