Function buildDropShadow

src/builder/shadow.ts:25–133

(
  { id, width, height }: { id: string; width: number; height: number },
  style: {
    shadowColor: string[]
    shadowOffset: {
      width: number
      height: number
    }[]
    shadowRadius: number[]
  },
  transparentText = false
)

const SCALE = 1.1

export function buildDropShadow(
  { id, width, height }: { id: string; width: number; height: number },
  style: {
    shadowColor: string[]
    shadowOffset: {
      width: number
      height: number
    }[]
    shadowRadius: number[]
  },
  transparentText = false
) {
  if (
    !style.shadowColor ||
    !style.shadowOffset ||
    typeof style.shadowRadius === 'undefined'
  ) {
    return ''
  }

  const shadowCount = style.shadowColor.length
  let effects = ''
  let merge = ''

  // There could be multiple shadows, we need to get the maximum bounding box
  // and use `feMerge` to merge them together.
  let left = 0
  let right = width
  let top = 0
  let bottom = height
  for (let i = 0; i < shadowCount; i++) {
    // Expand the area for the filter to prevent it from cutting off.
    const grow = (style.shadowRadius[i] * style.shadowRadius[i]) / 4
    left = Math.min(style.shadowOffset[i].width - grow, left)
    right = Math.max(style.shadowOffset[i].width + grow + width, right)
    top = Math.min(style.shadowOffset[i].height - grow, top)
    bottom = Math.max(style.shadowOffset[i].height + grow + height, bottom)

    if (transparentText) {
      // For transparent text, use primitive filters instead of feDropShadow
      // because feDropShadow automatically includes source in output and
      // source has unwanted text color
      const resultId = `satori_s-${id}-result-${i}`
      effects +=
        buildXMLString('feGaussianBlur', {
          in: 'SourceAlpha',
          stdDeviation: style.shadowRadius[i] / 2,
          result: `${resultId}-blur`,
        }) +
        buildXMLString('feOffset', {
          in: `${resultId}-blur`,
          dx: style.shadowOffset[i].width,
          dy: style.shadowOffset[i].height,
          result: `${resultId}-offset`,
        }) +
        buildXMLString('feFlood', {
          'flood-color': style.shadowColor[i],
          'flood-opacity': 1,