| <!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> |
| |
| 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> |
| `; |
| } |
| } |
| }); |
| } |
| |
| |
| 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> |
