fix: respect style on svg node (#473)

Close #397

Just make svg mode work

https://satori-playground-git-fork-jackie1210-feat-mask-type.vercel.sh/?share=zVXfb5swEP5XLFdTVykCzK8ElOxh3bRO6tSHrp00RWoJGOLWwQic0CzK_76zExKgWfc0aQ8I-7vz3XefffYGxyKhOMTjhK2mOUKVXHM62WzUGKE5ZdlchuicWNa788EOrFki5z0sYVXBozWgKacvDarGn1hJY8lEDrZY8OUib6wRZ1n-VdJFpUw0l7RsTE_LSrJ0fSkAzFX-rnkWxc9ZKZZ5cim4KMF-lqbpISusumW_aIgcuwX92NfiW5ZGt9tp_mFnHlerbDcCV8b5ZIpzkdMpbsAVo_VH8QK4hSxERvo7mncyTTagCATdYVqlLvSy4HkFMeZSFqFp1nVt1I4hysy0LcsyFYl9yD0vYLaIqudmckg0xZ30CLEEMh3yIKRW3eVMqmzLipa3RRTTm_yuatV03Gvt_n1dgGLnES_m0bkWp3HbVfIqp1ajDay7wKEGqCJmZcwpitWaAHxQrJz1aK_3jMOewrRscPOogan4HaeZ5jvZPC5L_v6MXDxuX6c6AuiYtQM2BNpgl0vbomiNhm3syA-SFpGct90TcP9G3MDwrBEi3tDw7Gs_MIhrI8-98tx7YntGMLzyfYMQx78HmzNy_GviBEYQBIj4rjFyvUviOobjODC3DZ-4iLg-hFR2yyC-B_N2ip8nq9EqFRHLpfXAWU6j8sEObPisiz_Wo1r2zVDkrVCtczq0u4bDWerhaosI8bqg2iLPPU1ybGbHcULTqk1_x-1LGSUM7o12yGyP_b05dFNN8UnhetyJIm8FPdRWqOsa_aK0N4F97OHaH_a1g7eqUteUFAV0rSj0tQf-9ZxJYN3ZvMZPpGlF9V0BDqcWKewGamdy37ndM2B2VfyX-vZP0yl9bSjjtb62ZQyDnvJa4e65aeS1fGM0_N8FHput8zxWzwKMAWQr-OMBFoV6TiscbrBuJxyO4EnDu57DoasmCZ0tMxymEa_oANOFeGLqgoeHXtZ6BnHUo_h5MaMJDmW5pNsBltEMPOaUc1GLkid4-xs
Need to wait for `@resvg/resvg-js` to support `mask-type`

src/handler/preprocess.ts

@@ -1,6 +1,6 @@
 import type { ReactElement, ReactNode } from 'react'
 import { resolveImageData, cache } from './image.js'
-import { isReactElement, parseViewBox } from '../utils.js'
+import { isReactElement, parseViewBox, midline } from '../utils.js'
 
 // Based on
 // https://raw.githubusercontent.com/facebook/react/master/packages/react-dom/src/shared/possibleStandardNames.js
@@ -115,7 +115,8 @@ function translateSVGNodeToSVGString(
 
  const { children, style, ...restProps } = node.props || {}
  const currentColor = style?.color || inheritedColor
- return `<${type}${Object.entries(restProps)
+
+ const attrs = `${Object.entries(restProps)
  .map(([k, _v]) => {
  if (typeof _v === 'string' && _v.toLowerCase() === 'currentcolor') {
  _v = currentColor
@@ -126,7 +127,18 @@ function translateSVGNodeToSVGString(
  }
  return ` ${ATTRIBUTE_MAPPING[k] || k}="${_v}"`
  })
- .join('')}>${translateSVGNodeToSVGString(children, currentColor)}</${type}>`
+ .join('')}`
+
+ const styles = style
+ ? ` style="${Object.entries(style)
+ .map(([k, _v]) => `${midline(k)}:${_v}`)
+ .join(';')}"`
+ : ''
+
+ return `<${type}${attrs}${styles}>${translateSVGNodeToSVGString(
+ children,
+ currentColor
+ )}</${type}>`
 }
 /**
  * pre process node and resolve absolute link to img data for image element

src/utils.ts

@@ -307,3 +307,10 @@ export function splitByBreakOpportunities(
 
  return { words, requiredBreaks }
 }
+
+export const midline = (s: string) => {
+ return s.replaceAll(
+ /([A-Z])/g,
+ (_, letter: string) => `-${letter.toLowerCase()}`
+ )
+}

test/svg.test.tsx

@@ -294,4 +294,30 @@ describe('SVG', () => {
  )
  expect(toImage(svg, 100)).toMatchImageSnapshot()
  })
+
+ // TODO wait for @resvg/resvg-js to support mask-type
+ it('should respect style on svg node', async () => {
+ const svg = await satori(
+ <div
+ style={{
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: '#fff',
+ fontSize: 32,
+ fontWeight: 600,
+ }}
+ >
+ <svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'>
+ <circle cx='50' cy='50' r='50' style={{ fill: 'gold' }} />
+ </svg>
+ </div>,
+ { width: 100, height: 100, fonts }
+ )
+
+ expect(toImage(svg, 100)).toMatchImageSnapshot()
+ })
 })