fix: background-clip:text should compatible with transform and mask

src/builder/rect.ts

@@ -298,11 +298,13 @@ export default async function rect(
  (imageBorderRadius ? imageBorderRadius[0] : '') +
  clip +
  (opacity !== 1 ? `<g opacity="${opacity}">` : '') +
- (style.transform && currentClipPath && maskId
- ? `<g clip-path="${currentClipPath}" mask="${maskId}">`
+ (style.transform && (currentClipPath || maskId)
+ ? `<g${currentClipPath ? ` clip-path="${currentClipPath}"` : ''}${
+ maskId ? ` mask="${maskId}"` : ''
+ }>`
  : '') +
  (backgroundShapes || shape) +
- (style.transform && currentClipPath && maskId ? '</g>' : '') +
+ (style.transform && (currentClipPath || maskId) ? '</g>' : '') +
  (opacity !== 1 ? `</g>` : '') +
  (shadow ? shadow[1] : '') +
  extra

test/background-clip.test.tsx

@@ -0,0 +1,105 @@
+import { it, describe, expect } from 'vitest'
+
+import { initFonts, toImage } from './utils.js'
+import satori from '../src/index.js'
+
+describe('backgroundClip', () => {
+ let fonts
+ initFonts((f) => (fonts = f))
+
+ it('should render background-clip:text', async () => {
+ const svg = await satori(
+ <div
+ style={{
+ display: 'flex',
+ fontSize: 30,
+ flexDirection: 'column',
+ background: '#ffffff',
+ }}
+ >
+ <div
+ style={{
+ backgroundImage: 'linear-gradient(to right, red, green)',
+ WebkitBackgroundClip: 'text',
+ backgroundClip: 'text',
+ color: 'transparent',
+ }}
+ >
+ lynn
+ </div>
+ </div>,
+ {
+ width: 100,
+ height: 100,
+ fonts,
+ }
+ )
+
+ expect(toImage(svg)).toMatchImageSnapshot()
+ })
+
+ it('should render background-clip:text compatible with transform', async () => {
+ const svg = await satori(
+ <div
+ style={{
+ display: 'flex',
+ fontSize: 30,
+ flexDirection: 'column',
+ background: '#ffffff',
+ }}
+ >
+ <div
+ style={{
+ transform: 'translateX(25px)',
+ backgroundImage: 'linear-gradient(to right, red, green)',
+ WebkitBackgroundClip: 'text',
+ backgroundClip: 'text',
+ color: 'transparent',
+ }}
+ >
+ lynn
+ </div>
+ </div>,
+ {
+ width: 100,
+ height: 100,
+ fonts,
+ }
+ )
+
+ expect(toImage(svg)).toMatchImageSnapshot()
+ })
+
+ it('should render background-clip:text compatible with mask', async () => {
+ const svg = await satori(
+ <div
+ style={{
+ display: 'flex',
+ fontSize: 30,
+ flexDirection: 'column',
+ background: '#ffffff',
+ }}
+ >
+ <div
+ style={{
+ transform: 'translateX(25px)',
+ backgroundImage: 'linear-gradient(to right, red, green)',
+ WebkitBackgroundClip: 'text',
+ backgroundClip: 'text',
+ maskImage: 'linear-gradient(to right, blue, transparent)',
+ color: 'transparent',
+ }}
+ >
+ lynn
+ </div>
+ </div>,
+ {
+ width: 100,
+ height: 100,
+ fonts,
+ }
+ )
+
+ expect(toImage(svg)).toMatchImageSnapshot()
+ })
+})