Filter ID conflict when rendering multiple receipts (missing black background on second receipt) #48
Description
Description
When rendering two receipts (SVGs) on the same page, the second one loses the black background for inverted text. Both SVGs define the same filter ID receiptlineinvert, which causes a DOM ID conflict.
Fix
Generate a unique filter ID for each SVG and replace all url(#receiptlineinvert) references accordingly. Also add xmlns:xlink if xlink:href is still used.
Patch Example
const id = 'receiptlineinvert-' + (crypto?.randomUUID?.() || Date.now().toString(36)+'-'+Math.random().toString(36).slice(2));
const rx = /url\(#receiptlineinvert\)/g;
const [content, style] = [this.svgContent, p.style].map(v => (v||'').replace(rx, `url(#${id})`));
return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 ${this.svgWidth} ${this.svgHeight}">
${style}
<defs><filter id="${id}" x="0" y="0" width="100%" height="100%">
<feFlood flood-color="#000"/><feComposite in="SourceGraphic" operator="xor"/>
</filter></defs>
<g font-family="${p.font}" font-size="${p.size}" text-anchor="middle"${p.lang}>${content}</g>
</svg>`;Expected Result
All receipts render inverted text with black background, no matter how many are on the same page.