Upload svg2Base64.ts

frontend/src/utils/svg2Base64.ts

@@ -49,18 +49,43 @@ const encode = (input: string) => {
 
 export const svg2Base64 = (element: Element) => {
   try {
+    console.log('svg2Base64: Starting conversion for element:', {
+      tagName: element.tagName,
+      className: element.className,
+      id: element.id,
+      hasChildren: element.children.length > 0
+    });
+    
     // 克隆元素以避免修改原始DOM
     const clonedElement = element.cloneNode(true) as Element;
+    console.log('svg2Base64: Element cloned successfully');
     
     // 确保SVG有正确的命名空间
     if (clonedElement.tagName.toLowerCase() === 'svg') {
       clonedElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
       clonedElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+      console.log('svg2Base64: Added SVG namespaces');
     }
     
+    // 检查是否有内联样式需要处理
+    const computedStyles = window.getComputedStyle(element);
+    console.log('svg2Base64: Element computed styles:', {
+      width: computedStyles.width,
+      height: computedStyles.height,
+      display: computedStyles.display,
+      visibility: computedStyles.visibility
+    });
+    
     const XMLS = new XMLSerializer();
     const svg = XMLS.serializeToString(clonedElement);
     
+    console.log('svg2Base64: Serialization result:', {
+      length: svg.length,
+      preview: svg.substring(0, 200) + '...',
+      containsSvgTag: svg.includes('<svg'),
+      containsContent: svg.length > 50
+    });
+    
     if (!svg || svg.length === 0) {
       throw new Error('SVG serialization returned empty string');
     }
@@ -70,9 +95,12 @@ export const svg2Base64 = (element: Element) => {
       throw new Error('Base64 encoding failed');
     }
     
+    console.log('svg2Base64: Encoding successful, result length:', (PREFIX + encoded).length);
     return PREFIX + encoded;
   } catch (error) {
     console.error('svg2Base64 failed:', error);
+    console.error('svg2Base64: Element that caused error:', element);
+    console.error('svg2Base64: Element outerHTML:', element.outerHTML);
     throw error;
   }
 }