Give each gradient its own id so codes stop sharing one

Author: Laoujin

src/qr/render.ts

@@ -91,8 +91,11 @@ export function renderSvg(design: QrDesign, extras: RenderExtras = {}): string {
     }
   }
 
+  /* Several codes share one document — the preview and every preset thumbnail —
+     so a fixed id would make them all resolve to whichever rendered first. */
+  const gradientId = `qz-${design.fg}${design.fg2}`.replace(/[^a-z0-9]/gi, '')
   const gradient = design.fg2
-    ? `<linearGradient id="qz-g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${design.fg}"/><stop offset="1" stop-color="${design.fg2}"/></linearGradient>`
+    ? `<linearGradient id="${gradientId}" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${design.fg}"/><stop offset="1" stop-color="${design.fg2}"/></linearGradient>`
     : ''
   const eyeColor = design.eye ?? design.fg
   const markColor = resolveMarkColor(design, extras.brandHex)
@@ -109,7 +112,7 @@ export function renderSvg(design: QrDesign, extras: RenderExtras = {}): string {
     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${view} ${view}" shape-rendering="geometricPrecision">` +
     `<defs>${gradient}</defs>` +
     `<rect width="${view}" height="${view}" fill="${design.bg}"/>` +
-    `<g fill="${design.fg2 ? 'url(#qz-g)' : design.fg}">${mods}</g>` +
+    `<g fill="${design.fg2 ? `url(#${gradientId})` : design.fg}">${mods}</g>` +
     `<g color="${eyeColor}" fill="${eyeColor}">${finders.map(([r, c]) => eye(design.eyeFrame, design.eyeDot, r + q, c + q)).join('')}</g>` +
     mark +
     '</svg>'

src/ui/steps/Style.tsx

@@ -97,10 +97,10 @@ export default function Style({ design, onSet, onPreset }: Props) {
         <summary className="eyebrow" style={{ cursor: 'pointer' }}>More: gradient, eye colour, quiet zone</summary>
         <div className="two" style={{ marginTop: 12 }}>
           <div className="field">
-            <label htmlFor="c-fg2">Gradient end</label>
+            <label htmlFor="c-fg2">Second colour</label>
             <div className="tf">
               <input id="c-fg2" type="color" value={design.fg2 ?? design.fg} onChange={e => onSet({ fg2: e.target.value })} />
-              <input value={design.fg2 ?? ''} placeholder="off" onChange={e => onSet({ fg2: e.target.value || null })} />
+              <input value={design.fg2 ?? ''} placeholder="no gradient" onChange={e => onSet({ fg2: e.target.value || null })} />
               {design.fg2 && (
                 <button className="btn btn-ghost btn-sm" onClick={() => onSet({ fg2: null })}>Clear</button>
               )}

test/decode.test.ts

@@ -118,3 +118,15 @@ describe("the app's own defaults", () => {
     expect(await verifyScannable(svg, resvgRasterizer, zxingDecoder)).toBe(encodePayload(design))
   })
 })
+
+describe('gradients', () => {
+  it('gives each colour pair its own gradient id, so codes on one page do not steal each others', () => {
+    const a = renderSvg(baseDesign({ fg: '#2B4BF2', fg2: '#8B2BF2' }))
+    const b = renderSvg(baseDesign({ fg: '#1B6B4A', fg2: '#E78200' }))
+    const idOf = (svg: string) => svg.match(/<linearGradient id="([^"]+)"/)?.[1]
+    expect(idOf(a)).toBeTruthy()
+    expect(idOf(a)).not.toBe(idOf(b))
+    expect(a).toContain(`url(#${idOf(a)})`)
+    expect(b).toContain(`url(#${idOf(b)})`)
+  })
+})