From d42a09ab81cc060215f00f64e22f81a58e66feeb Mon Sep 17 00:00:00 2001
From: s4luorth <s4luorth@uni-trier.de>
Date: Fri, 28 Aug 2026 07:36:25 +0200
Subject: [PATCH] Signatur-Einbettung: Single-Stroke erzwingen (fill:none),
 CSS-Klassen/Styles + width/height entfernen, viewBox-basiert skalieren

Behebt gefuellte Signaturen bei Illustrator-Exporten (<style>-Klasse .cls-1 ging beim
Path-Extrahieren verloren -> fill:black). Skalierung nun auf die eigene viewBox der
Signatur statt fix auf den 600x160-Zeichen-Canvas; Punkt (<circle>) bleibt erhalten.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/lib/svg-generator.js | 37 ++++++++++++++++++++++++++++---------
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/lib/svg-generator.js b/src/lib/svg-generator.js
index 224e094..0ca756a 100644
--- a/src/lib/svg-generator.js
+++ b/src/lib/svg-generator.js
@@ -25,20 +25,39 @@ const SIG_CANVAS_H = 160;
 function buildSignatureElement(svgString, x, y, scale) {
   if (!svgString || typeof svgString !== 'string') return '';
 
-  // Nur <path>-Elemente extrahieren (unsere Signatur-SVGs enthalten ausschließlich Paths)
-  const pathRegex = /<path\b([^/]*)\/>/gi;
+  // viewBox der Signatur lesen, damit beliebige Quell-SVGs (z.B. Illustrator-
+  // Export mit eigener viewBox) korrekt normiert werden statt fix auf den
+  // 600×160-Zeichen-Canvas. Ohne viewBox: Fallback auf den Canvas (Alt-Signaturen).
+  let minx = 0;
+  let miny = 0;
+  let vh = SIG_CANVAS_H;
+  const vbM = svgString.match(/viewBox\s*=\s*"([^"]+)"/i);
+  if (vbM) {
+    const p = vbM[1].trim().split(/[\s,]+/).map(Number);
+    if (p.length === 4 && p[2] > 0 && p[3] > 0) { minx = p[0]; miny = p[1]; vh = p[3]; }
+  }
+  // Skala auf die Eigen-Höhe beziehen: Canvas-Signaturen (vh=160) unverändert,
+  // hochgeladene SVGs werden auf dieselbe Zielhöhe eingepasst.
+  const s = scale * (SIG_CANVAS_H / vh);
+
+  // Alle Zeichen-Elemente extrahieren und IMMER als Single-Stroke ausgeben:
+  // fill:none + schwarzer Stroke inline; Klasse/Style/fill/stroke/width/height
+  // entfernen. So gehen per <style>-Klasse (z.B. .cls-1) gesetzte Linien nicht
+  // verloren (sonst fällt der Pfad auf fill:black zurück und rendert gefüllt).
+  const elemRe = /<(path|polyline|line|circle|ellipse|polygon)\b([^>]*?)\/?>/gi;
   const elements = [];
   let m;
-  while ((m = pathRegex.exec(svgString)) !== null) {
-    // Stroke-Farbe auf Druckfarbe setzen, stroke-width relativ zur Skalierung anpassen
-    const attrs = m[1]
-      .replace(/stroke="[^"]*"/i, 'stroke="#000000"')
-      .replace(/stroke-width="[^"]*"/i, `stroke-width="${(2.5 / scale).toFixed(2)}"`);
-    elements.push(`<path${attrs}/>`);
+  while ((m = elemRe.exec(svgString)) !== null) {
+    const attrs = m[2].replace(/\s(?:class|style|fill|stroke|stroke-width|width|height)\s*=\s*"[^"]*"/gi, '');
+    elements.push(`<${m[1]}${attrs} fill="none" stroke="#000000"/>`);
   }
   if (!elements.length) return '';
 
-  return `<g transform="translate(${x.toFixed(1)}, ${y.toFixed(1)}) scale(${scale.toFixed(4)})">
+  // stroke-width auf der Gruppe (in Quell-Einheiten), damit nach scale ~2.5px herauskommt.
+  const sw = (2.5 / s).toFixed(2);
+  const tx = (x - minx * s).toFixed(1);
+  const ty = (y - miny * s).toFixed(1);
+  return `<g transform="translate(${tx}, ${ty}) scale(${s.toFixed(4)})" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round">
   ${elements.join('\n  ')}
 </g>`;
 }