@pixldocs/canvas-renderer 0.3.24 → 0.3.26

package/dist/index.cjs

@@ -11110,7 +11110,12 @@ class PixldocsRenderer {
               { width: canvasWidth, height: canvasHeight },
               { cssOnly: false, backstoreOnly: false }
             );
-            const svgString = fabricInstance.toSVG();
+            const rawSvgString = fabricInstance.toSVG();
+            const svgString = this.normalizeSvgDimensions(
+              rawSvgString,
+              canvasWidth,
+              canvasHeight
+            );
             fabricInstance.enableRetinaScaling = prevRetina;
             fabricInstance.setDimensions(
               { width: prevWidth, height: prevHeight },
@@ -11156,22 +11161,44 @@ class PixldocsRenderer {
    * the SVG coordinate system matches the intended page size exactly.
    */
   normalizeSvgDimensions(svg, targetWidth, targetHeight) {
-    const widthMatch = svg.match(/<svg[^>]*\bwidth="([^"]+)"/);
-    const heightMatch = svg.match(/<svg[^>]*\bheight="([^"]+)"/);
+    const widthMatch = svg.match(/<svg[^>]*\bwidth="([^"]+)"/i);
+    const heightMatch = svg.match(/<svg[^>]*\bheight="([^"]+)"/i);
     const svgWidth = widthMatch ? parseFloat(widthMatch[1]) : targetWidth;
     const svgHeight = heightMatch ? parseFloat(heightMatch[1]) : targetHeight;
-    if (Math.abs(svgWidth - targetWidth) < 1 && Math.abs(svgHeight - targetHeight) < 1) {
-      return svg;
-    }
     console.log(
-      `[canvas-renderer][svg-normalize] SVG dimensions ${svgWidth}x${svgHeight} → ${targetWidth}x${targetHeight}`
+      `[canvas-renderer][svg-normalize] root ${svgWidth}x${svgHeight} → page ${targetWidth}x${targetHeight}`
     );
-    let normalized = svg.replace(/(<svg[^>]*\b)width="[^"]*"/, `$1width="${targetWidth}"`).replace(/(<svg[^>]*\b)height="[^"]*"/, `$1height="${targetHeight}"`);
-    const viewBox = `0 0 ${svgWidth} ${svgHeight}`;
-    if (/viewBox="[^"]*"/.test(normalized)) {
-      normalized = normalized.replace(/viewBox="[^"]*"/, `viewBox="${viewBox}"`);
+    let normalized = svg;
+    if (/\bwidth="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/(<svg[^>]*\b)width="[^"]*"/i, `$1width="${targetWidth}"`);
+    } else {
+      normalized = normalized.replace(/<svg\b/i, `<svg width="${targetWidth}"`);
+    }
+    if (/\bheight="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/(<svg[^>]*\b)height="[^"]*"/i, `$1height="${targetHeight}"`);
+    } else {
+      normalized = normalized.replace(/<svg\b/i, `<svg height="${targetHeight}"`);
+    }
+    const viewBox = `0 0 ${targetWidth} ${targetHeight}`;
+    if (/\bviewBox="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/viewBox="[^"]*"/i, `viewBox="${viewBox}"`);
     } else {
-      normalized = normalized.replace(/<svg\b/, `<svg viewBox="${viewBox}"`);
+      normalized = normalized.replace(/<svg\b/i, `<svg viewBox="${viewBox}"`);
+    }
+    normalized = normalized.replace(/\b(rx|ry)="undefined"/g, '$1="0"');
+    if (/\bx="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/(<svg[^>]*\b)x="[^"]*"/i, '$1x="0"');
+    } else {
+      normalized = normalized.replace(/<svg\b/i, '<svg x="0"');
+    }
+    if (/\by="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/(<svg[^>]*\b)y="[^"]*"/i, '$1y="0"');
+    } else {
+      normalized = normalized.replace(/<svg\b/i, '<svg y="0"');
+    }
+    normalized = normalized.replace(/\bpreserveAspectRatio="[^"]*"/i, 'preserveAspectRatio="none"');
+    if (!/\bpreserveAspectRatio="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/<svg\b/i, '<svg preserveAspectRatio="none"');
     }
     return normalized;
   }