debug_vector_export.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矢量元素导出调试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .test-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        .svg-container {
            display: inline-block;
            margin: 10px;
            border: 1px solid #ccc;
            padding: 10px;
            background: white;
        }
        .debug-info {
            background: #f8f9fa;
            padding: 10px;
            margin-top: 10px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 12px;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        .error {
            color: #dc3545;
            background: #f8d7da;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .success {
            color: #155724;
            background: #d4edda;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>PPT矢量元素导出问题诊断</h1>
        
        <div class="test-section">
            <div class="test-title">1. 基础形状元素测试</div>
            <div class="svg-container">
                <svg width="100" height="100" id="basic-shape">
                    <path d="M10,10 L90,10 L90,90 L10,90 Z" 
                          fill="#ff6b6b" 
                          stroke="#333" 
                          stroke-width="2" 
                          vector-effect="non-scaling-stroke"/>
                </svg>
                <div class="debug-info">基础矩形 - 100x100px</div>
            </div>
            
            <div class="svg-container">
                <svg width="100" height="100" id="circle-shape">
                    <circle cx="50" cy="50" r="40" 
                            fill="#4ecdc4" 
                            stroke="#333" 
                            stroke-width="2" 
                            vector-effect="non-scaling-stroke"/>
                </svg>
                <div class="debug-info">圆形 - 半径40px</div>
            </div>
        </div>
        
        <div class="test-section">
            <div class="test-title">2. 复杂路径元素测试</div>
            <div class="svg-container">
                <svg width="120" height="100" id="complex-path">
                    <path d="M20,80 C20,80 20,20 50,20 S80,20 80,50 S80,80 50,80 S20,80 20,80" 
                          fill="#45b7d1" 
                          stroke="#333" 
                          stroke-width="2" 
                          vector-effect="non-scaling-stroke"/>
                </svg>
                <div class="debug-info">复杂曲线路径</div>
            </div>
            
            <div class="svg-container">
                <svg width="100" height="100" id="star-shape">
                    <path d="M50,5 L61,35 L95,35 L68,57 L79,91 L50,70 L21,91 L32,57 L5,35 L39,35 Z" 
                          fill="#f7b731" 
                          stroke="#333" 
                          stroke-width="2" 
                          vector-effect="non-scaling-stroke"/>
                </svg>
                <div class="debug-info">星形路径</div>
            </div>
        </div>
        
        <div class="test-section">
            <div class="test-title">3. 线条元素测试</div>
            <div class="svg-container">
                <svg width="120" height="80" id="line-element">
                    <path d="M10,40 L110,40" 
                          stroke="#e74c3c" 
                          stroke-width="3" 
                          vector-effect="non-scaling-stroke"
                          marker-end="url(#arrowhead)"/>
                    <defs>
                        <marker id="arrowhead" markerWidth="10" markerHeight="7" 
                                refX="9" refY="3.5" orient="auto">
                            <polygon points="0 0, 10 3.5, 0 7" fill="#e74c3c"/>
                        </marker>
                    </defs>
                </svg>
                <div class="debug-info">带箭头的直线</div>
            </div>
            
            <div class="svg-container">
                <svg width="120" height="80" id="curved-line">
                    <path d="M10,60 Q60,10 110,60" 
                          stroke="#9b59b6" 
                          stroke-width="3" 
                          fill="none"
                          vector-effect="non-scaling-stroke"/>
                </svg>
                <div class="debug-info">二次贝塞尔曲线</div>
            </div>
        </div>
        
        <div class="test-section">
            <div class="test-title">4. 导出测试功能</div>
            <button onclick="testSVGSerialization()">测试SVG序列化</button>
            <button onclick="testBase64Conversion()">测试Base64转换</button>
            <button onclick="testElementDimensions()">测试元素尺寸</button>
            <button onclick="runAllTests()">运行所有测试</button>
            
            <div id="test-results"></div>
        </div>
        
        <div class="test-section">
            <div class="test-title">5. 问题诊断结果</div>
            <div id="diagnosis-results">
                <p>点击上方按钮开始诊断...</p>
            </div>
        </div>
    </div>
    
    <script>
        // SVG序列化测试
        function testSVGSerialization() {
            const results = document.getElementById('test-results');
            results.innerHTML = '<h4>SVG序列化测试结果:</h4>';
            
            const svgElements = ['basic-shape', 'circle-shape', 'complex-path', 'star-shape', 'line-element', 'curved-line'];
            
            svgElements.forEach(id => {
                const svg = document.getElementById(id);
                if (svg) {
                    try {
                        const serializer = new XMLSerializer();
                        const svgString = serializer.serializeToString(svg);
                        const isValid = svgString.length > 0 && svgString.includes('<svg');
                        
                        results.innerHTML += `
                            <div class="${isValid ? 'success' : 'error'}">
                                <strong>${id}:</strong> ${isValid ? '✓ 序列化成功' : '✗ 序列化失败'}<br>
                                <small>长度: ${svgString.length} 字符</small>
                            </div>
                        `;
                    } catch (error) {
                        results.innerHTML += `
                            <div class="error">
                                <strong>${id}:</strong> ✗ 序列化异常: ${error.message}
                            </div>
                        `;
                    }
                }
            });
        }
        
        // Base64转换测试
        function testBase64Conversion() {
            const results = document.getElementById('test-results');
            results.innerHTML = '<h4>Base64转换测试结果:</h4>';
            
            const svg = document.getElementById('basic-shape');
            if (svg) {
                try {
                    const serializer = new XMLSerializer();
                    const svgString = serializer.serializeToString(svg);
                    const base64 = btoa(unescape(encodeURIComponent(svgString)));
                    const dataUrl = `data:image/svg+xml;base64,${base64}`;
                    
                    results.innerHTML += `
                        <div class="success">
                            <strong>Base64转换:</strong> ✓ 成功<br>
                            <small>Data URL长度: ${dataUrl.length} 字符</small><br>
                            <img src="${dataUrl}" style="max-width: 100px; border: 1px solid #ccc; margin-top: 5px;">
                        </div>
                    `;
                } catch (error) {
                    results.innerHTML += `
                        <div class="error">
                            <strong>Base64转换:</strong> ✗ 失败: ${error.message}
                        </div>
                    `;
                }
            }
        }
        
        // 元素尺寸测试
        function testElementDimensions() {
            const results = document.getElementById('test-results');
            results.innerHTML = '<h4>元素尺寸测试结果:</h4>';
            
            const svgElements = ['basic-shape', 'circle-shape', 'complex-path'];
            
            svgElements.forEach(id => {
                const svg = document.getElementById(id);
                if (svg) {
                    const clientWidth = svg.clientWidth;
                    const clientHeight = svg.clientHeight;
                    const boundingRect = svg.getBoundingClientRect();
                    
                    const isValidSize = clientWidth > 0 && clientHeight > 0;
                    
                    results.innerHTML += `
                        <div class="${isValidSize ? 'success' : 'error'}">
                            <strong>${id}:</strong><br>
                            clientWidth: ${clientWidth}px<br>
                            clientHeight: ${clientHeight}px<br>
                            boundingRect: ${boundingRect.width}x${boundingRect.height}px<br>
                            ${isValidSize ? '✓ 尺寸正常' : '✗ 尺寸异常 (可能导致导出失败)'}
                        </div>
                    `;
                }
            });
        }
        
        // 运行所有测试
        function runAllTests() {
            testSVGSerialization();
            setTimeout(() => {
                testBase64Conversion();
                setTimeout(() => {
                    testElementDimensions();
                    setTimeout(generateDiagnosis, 500);
                }, 500);
            }, 500);
        }
        
        // 生成诊断报告
        function generateDiagnosis() {
            const diagnosisDiv = document.getElementById('diagnosis-results');
            
            diagnosisDiv.innerHTML = `
                <h4>诊断报告:</h4>
                <div class="debug-info">
                    <strong>可能的问题原因:</strong><br>
                    1. SVG元素尺寸为0或负数 (clientWidth < 1 || clientHeight < 1)<br>
                    2. SVG序列化失败或返回空字符串<br>
                    3. Base64编码过程中出现错误<br>
                    4. 特殊形状元素(special=true)的DOM查询失败<br>
                    5. vector-effect="non-scaling-stroke"属性导致的兼容性问题<br><br>
                    
                    <strong>建议的解决方案:</strong><br>
                    1. 在导出前检查SVG元素的实际渲染尺寸<br>
                    2. 添加SVG序列化的错误处理和重试机制<br>
                    3. 确保DOM元素在导出时已完全渲染<br>
                    4. 考虑使用setTimeout延迟导出以确保渲染完成<br>
                    5. 添加更详细的错误日志记录<br>
                </div>
            `;
        }
        
        // 页面加载完成后自动运行基础检查
        window.addEventListener('load', () => {
            console.log('矢量元素导出调试页面已加载');
            console.log('可用的测试函数:', {
                testSVGSerialization,
                testBase64Conversion, 
                testElementDimensions,
                runAllTests
            });
        });
    </script>
</body>
</html>