fix: generate unique SVG gradient IDs to prevent DOM ID collisions on re-render

This commit is contained in:
Ulas Kalayci
2026-04-25 22:24:40 +02:00
parent b07a254d0a
commit 1c0725cc57
+3 -2
View File
@@ -313,7 +313,8 @@ function renderAppShell(container) {
logoSvg.setAttribute('fill', 'none'); logoSvg.setAttribute('fill', 'none');
const defs = document.createElementNS(SVG_NS, 'defs'); const defs = document.createElementNS(SVG_NS, 'defs');
const grad = document.createElementNS(SVG_NS, 'linearGradient'); const grad = document.createElementNS(SVG_NS, 'linearGradient');
grad.setAttribute('id', 'oikos-logo-bg'); const gradId = `oikos-logo-bg-${Math.random().toString(36).slice(2, 7)}`;
grad.setAttribute('id', gradId);
grad.setAttribute('x1', '0'); grad.setAttribute('y1', '0'); grad.setAttribute('x1', '0'); grad.setAttribute('y1', '0');
grad.setAttribute('x2', '160'); grad.setAttribute('y2', '160'); grad.setAttribute('x2', '160'); grad.setAttribute('y2', '160');
grad.setAttribute('gradientUnits', 'userSpaceOnUse'); grad.setAttribute('gradientUnits', 'userSpaceOnUse');
@@ -328,7 +329,7 @@ function renderAppShell(container) {
logoSvg.appendChild(defs); logoSvg.appendChild(defs);
const bgRect = document.createElementNS(SVG_NS, 'rect'); const bgRect = document.createElementNS(SVG_NS, 'rect');
bgRect.setAttribute('width', '160'); bgRect.setAttribute('height', '160'); bgRect.setAttribute('width', '160'); bgRect.setAttribute('height', '160');
bgRect.setAttribute('rx', '36'); bgRect.setAttribute('fill', 'url(#oikos-logo-bg)'); bgRect.setAttribute('rx', '36'); bgRect.setAttribute('fill', `url(#${gradId})`);
logoSvg.appendChild(bgRect); logoSvg.appendChild(bgRect);
const housePath = document.createElementNS(SVG_NS, 'path'); const housePath = document.createElementNS(SVG_NS, 'path');
housePath.setAttribute('d', 'M80 36L36 72V120C36 122.2 37.8 124 40 124H68V96H92V124H120C122.2 124 124 122.2 124 120V72L80 36Z'); housePath.setAttribute('d', 'M80 36L36 72V120C36 122.2 37.8 124 40 124H68V96H92V124H120C122.2 124 124 122.2 124 120V72L80 36Z');