Ability to specify the id's for clipping and masking?

[romellogoodman]

Feature Request

Description

I'm using Satori in a generative environment where different variations of the same output are being rendered on the page. Becuase id's for masks and clip-path attributes are generated this means that the clipping are not behaving as you would expect and they collide with one another. Would it be possible to add the ability to specify an id to be appended or prepended to clip-path? Maybe detect it from the parent element?

[gersomvg]

I'm surprised this doesn't have more upvotes. I guess most people are really just using this for generating OG images and not running into this issue.

I've worked around it for now by wrapping the satori call with this function:

let counter = 0;
const makeIdsUnique = (svg: string) => {
  const ids = new Set(
    Array.from(svg.matchAll(/\sid="([^"]*)"/g)).map((match) => match[1]),
  );
  for (const id of ids) {
    const newId = 'satori' + counter;
    counter++;
    svg = svg.replaceAll(`id="${id}"`, `id="${newId}"`);
    svg = svg.replaceAll(`url(#${id})`, `url(#${newId})`);
  }
  return svg;
};

I run this in browser (in web worker) but on the server you might want to have a random hash instead of an ever increasing counter.