面试题手册

SVG 提供了 <defs> 和 <use> 元素，用于定义可重用的图形组件，这是 SVG 的一个强大特性：1. defs 元素<defs> 元素用于定义可重用的元素，这些元素不会直接渲染，只有被引用时才会显示。<svg width="200" height="200"> <defs> <!-- 定义渐变 --> <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#ff6b6b" /> <stop offset="100%" stop-color="#4ecdc4" /> </linearGradient> <!-- 定义滤镜 --> <filter id="myShadow"> <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="#000" flood-opacity="0.3" /> </filter> <!-- 定义图形 --> <circle id="myCircle" cx="0" cy="0" r="20" fill="url(#myGradient)" /> </defs> <!-- 使用定义的图形 --> <use href="#myCircle" x="50" y="50" /> <use href="#myCircle" x="150" y="50" /></svg>2. symbol 元素<symbol> 元素用于定义可重用的图形模板，类似于组件。<svg width="200" height="200"> <defs> <symbol id="icon-home" viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/> </symbol> <symbol id="icon-user" viewBox="0 0 24 24"> <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/> </symbol> </defs> <!-- 使用定义的图标 --> <svg width="24" height="24"> <use href="#icon-home" /> </svg> <svg width="48" height="48"> <use href="#icon-user" /> </svg></svg>3. use 元素<use> 元素用于引用和重用定义的元素。基本用法：<use href="#elementId" x="50" y="50" />属性说明：href：引用元素的 ID（使用 # 前缀）x, y：引用位置width, height：引用尺寸（仅适用于 symbol）transform：变换4. 实际应用示例图标系统：<!-- 定义图标库 --><svg style="display: none;"> <defs> <symbol id="icon-search" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> </symbol> <symbol id="icon-menu" viewBox="0 0 24 24"> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> </symbol> </defs></svg><!-- 使用图标 --><button> <svg width="20" height="20" aria-hidden="true"> <use href="#icon-search" /> </svg> 搜索</button><button> <svg width="20" height="20" aria-hidden="true"> <use href="#icon-menu" /> </svg> 菜单</button>图案填充：<svg width="200" height="200"> <defs> <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="5" fill="#ff6b6b" /> </pattern> </defs> <rect width="200" height="200" fill="url(#myPattern)" /></svg>5. 优势减少代码重复提高可维护性减小文件大小便于统一修改支持动态样式6. 最佳实践将常用图形定义为 symbol使用有意义的 ID 命名合理组织 defs 结构考虑使用 SVG sprite 技术为可重用元素添加适当的描述

SVG 在网页中有多种使用方式，每种方式都有其适用场景和优缺点：1. 内联 SVG（Inline SVG）<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red" /></svg>优点：可以通过 CSS 和 JavaScript 完全控制样式和交互；减少 HTTP 请求；支持动画和事件缺点：增加 HTML 文件大小；不适合重复使用的图形适用场景：需要交互的图标、动画、独特的图形2. 作为 img 标签引用<img src="icon.svg" alt="图标" />优点：代码简洁；可以缓存；适合重复使用的图形缺点：无法通过 CSS 控制内部样式；不支持交互和动画适用场景：静态图标、logo、不需要交互的图形3. 作为 background-image.icon { background-image: url('icon.svg'); background-size: contain;}优点：可以应用 CSS 效果（如 hover）；适合图标系统缺点：无法控制内部元素；不支持交互适用场景：图标字体替代方案、装饰性图形4. 使用 object 标签<object data="icon.svg" type="image/svg+xml"></object>优点：支持外部 CSS 文件；可以访问 SVG DOM缺点：浏览器兼容性稍差；加载方式复杂适用场景：需要外部样式控制的复杂图形5. 使用 embed 标签<embed src="icon.svg" type="image/svg+xml" />优点：支持脚本访问；兼容性较好缺点：非标准元素；不推荐使用适用场景：需要向后兼容的旧项目最佳实践建议：需要交互或动画时使用内联 SVG静态图标使用 img 或 background-image复杂图形考虑使用 object 或内联对于大量图标，考虑使用 SVG sprite 技术

SVG 提供了多种基本形状元素，每个元素都有其特定的属性和用途：1. 矩形（rect）<rect x="10" y="10" width="100" height="50" rx="5" ry="5" fill="blue" />x, y：矩形左上角坐标width, height：矩形宽度和高度rx, ry：圆角半径（水平和垂直）用途：按钮、卡片、背景等2. 圆形（circle）<circle cx="50" cy="50" r="40" fill="red" />cx, cy：圆心坐标r：半径用途：点、圆形装饰、头像等3. 椭圆（ellipse）<ellipse cx="100" cy="50" rx="50" ry="30" fill="green" />cx, cy：椭圆中心坐标rx, ry：水平和垂直半径用途：椭圆装饰、眼睛形状等4. 线条（line）<line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2" />x1, y1：起点坐标x2, y2：终点坐标stroke：描边颜色stroke-width：描边宽度用途：分隔线、连接线等5. 折线（polyline）<polyline points="10,10 50,50 100,10 150,50" fill="none" stroke="blue" stroke-width="2" />points：点坐标列表（x1,y1 x2,y2 …）用途：图表、折线图等6. 多边形（polygon）<polygon points="50,10 90,90 10,90" fill="orange" />points：顶点坐标列表（自动闭合）用途：三角形、星形等封闭形状7. 路径（path）<path d="M 10 10 L 100 100 L 10 100 Z" fill="purple" />d：路径命令（最强大的形状元素）用途：复杂形状、自定义图形通用属性：fill：填充颜色stroke：描边颜色stroke-width：描边宽度stroke-linecap：线条端点样式（butt, round, square）stroke-linejoin：线条连接样式（miter, round, bevel）opacity：透明度（0-1）transform：变换（旋转、缩放、平移等）选择建议：简单形状优先使用基本元素（rect, circle, ellipse）复杂形状使用 path需要多个点的形状使用 polyline 或 polygon考虑代码可读性和维护性

SVG 提供了多种方式来实现交互功能，使其成为创建交互式图形的强大工具：1. 事件监听SVG 元素支持标准 DOM 事件，可以直接在 SVG 元素上添加事件监听器。HTML 属性方式：<svg width="200" height="200"> <circle cx="100" cy="100" r="50" fill="blue" onclick="handleClick()" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()" /></svg><script>function handleClick() { console.log('Circle clicked!');}function handleMouseOver() { console.log('Mouse over circle');}function handleMouseOut() { console.log('Mouse out of circle');}</script>JavaScript addEventListener 方式：const circle = document.querySelector('circle');circle.addEventListener('click', function() { this.setAttribute('fill', 'red');});circle.addEventListener('mouseover', function() { this.setAttribute('fill', 'green');});circle.addEventListener('mouseout', function() { this.setAttribute('fill', 'blue');});2. CSS 交互使用 CSS 的伪类和过渡效果实现交互。<svg width="200" height="200"> <style> .interactive-circle { fill: blue; transition: all 0.3s ease; cursor: pointer; } .interactive-circle:hover { fill: red; r: 60; } .interactive-circle:active { fill: green; } </style> <circle class="interactive-circle" cx="100" cy="100" r="50" /></svg>3. JavaScript 动态操作通过 JavaScript 动态修改 SVG 属性和样式。// 修改属性const circle = document.querySelector('circle');circle.setAttribute('cx', '150');circle.setAttribute('fill', 'purple');// 修改样式circle.style.fill = 'orange';circle.style.opacity = '0.5';// 添加新元素const svg = document.querySelector('svg');const newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');newCircle.setAttribute('cx', '50');newCircle.setAttribute('cy', '50');newCircle.setAttribute('r', '30');newCircle.setAttribute('fill', 'yellow');svg.appendChild(newCircle);4. 拖拽交互实现 SVG 元素的拖拽功能。let selectedElement = null;let offset = { x: 0, y: 0 };function getMousePosition(evt) { const CTM = svg.getScreenCTM(); return { x: (evt.clientX - CTM.e) / CTM.a, y: (evt.clientY - CTM.f) / CTM.d };}function startDrag(evt) { selectedElement = evt.target; offset = getMousePosition(evt); offset.x -= parseFloat(selectedElement.getAttribute('cx')); offset.y -= parseFloat(selectedElement.getAttribute('cy'));}function drag(evt) { if (selectedElement) { evt.preventDefault(); const coord = getMousePosition(evt); selectedElement.setAttribute('cx', coord.x - offset.x); selectedElement.setAttribute('cy', coord.y - offset.y); }}function endDrag(evt) { selectedElement = null;}const svg = document.querySelector('svg');svg.addEventListener('mousedown', startDrag);svg.addEventListener('mousemove', drag);svg.addEventListener('mouseup', endDrag);svg.addEventListener('mouseleave', endDrag);5. 动画交互结合动画和交互实现更复杂的效果。const circle = document.querySelector('circle');circle.addEventListener('click', function() { this.style.transition = 'all 0.5s ease'; this.style.transform = 'scale(1.5)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 500);});6. 可访问性交互为 SVG 添加可访问性支持。<svg width="200" height="200" role="img" aria-labelledby="svg-title svg-desc"> <title id="svg-title">交互式圆形</title> <desc id="svg-desc">点击圆形可以改变颜色</desc> <circle cx="100" cy="100" r="50" fill="blue" tabindex="0" onclick="changeColor(this)" onkeydown="handleKeydown(event, this)" /></svg><script>function changeColor(element) { const colors = ['blue', 'red', 'green', 'yellow', 'purple']; const currentColor = element.getAttribute('fill'); const currentIndex = colors.indexOf(currentColor); const nextIndex = (currentIndex + 1) % colors.length; element.setAttribute('fill', colors[nextIndex]);}function handleKeydown(event, element) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); changeColor(element); }}</script>最佳实践：优先使用 CSS 实现简单交互复杂交互使用 JavaScript添加适当的可访问性支持考虑移动端触摸事件优化性能，避免频繁的 DOM 操作

SVG 提供了强大的渐变和滤镜功能，可以创建丰富的视觉效果：1. 渐变（Gradients）SVG 支持线性渐变和径向渐变，需要在 <defs> 中定义，然后通过 fill 或 stroke 引用。线性渐变（linearGradient）<svg width="200" height="100"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <rect width="200" height="100" fill="url(#grad1)" /></svg>属性说明：x1, y1, x2, y2：渐变线的起点和终点坐标gradientUnits：坐标系统（userSpaceOnUse 或 objectBoundingBox）gradientTransform：渐变变换spreadMethod：渐变扩展方式（pad, reflect, repeat）径向渐变（radialGradient）<svg width="200" height="200"> <defs> <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:white;stop-opacity:1" /> <stop offset="100%" style="stop-color:blue;stop-opacity:1" /> </radialGradient> </defs> <circle cx="100" cy="100" r="90" fill="url(#grad2)" /></svg>属性说明：cx, cy, r：外圆的中心和半径fx, fy：焦点位置（渐变中心）2. 滤镜（Filters）SVG 滤镜可以应用各种视觉效果，如模糊、阴影、发光等。模糊滤镜（feGaussianBlur）<svg width="200" height="100"> <defs> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <rect width="100" height="50" fill="blue" filter="url(#blur)" /></svg>阴影滤镜（feDropShadow）<svg width="200" height="100"> <defs> <filter id="shadow"> <feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="black" flood-opacity="0.5" /> </filter> </defs> <rect x="50" y="25" width="100" height="50" fill="red" filter="url(#shadow)" /></svg>发光滤镜（feGaussianBlur + feMerge）<svg width="200" height="100"> <defs> <filter id="glow"> <feGaussianBlur stdDeviation="3.5" result="coloredBlur"/> <feMerge> <feMergeNode in="coloredBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <text x="100" y="50" font-size="30" fill="yellow" filter="url(#glow)" text-anchor="middle">Glow</text></svg>常用滤镜元素：feGaussianBlur：高斯模糊feDropShadow：阴影feOffset：偏移feColorMatrix：颜色矩阵变换feBlend：混合模式feComposite：合成feMerge：合并feFlood：填充颜色3. 组合使用<svg width="300" height="200"> <defs> <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#ff6b6b" /> <stop offset="100%" stop-color="#4ecdc4" /> </linearGradient> <filter id="shadow"> <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="#000" flood-opacity="0.3" /> </filter> </defs> <rect x="50" y="50" width="200" height="100" rx="10" ry="10" fill="url(#grad)" filter="url(#shadow)" /></svg>性能优化建议：滤镜是性能密集型操作，谨慎使用简单效果优先使用 CSS复杂效果考虑使用 Canvas避免在动画中使用复杂滤镜

SVG 文本功能强大，可以创建各种文本效果和排版。以下是 SVG 文本的主要特性和使用方法：1. 基本文本元素使用 <text> 元素创建文本。<svg width="300" height="200"> <text x="50" y="50" font-size="24" font-family="Arial" fill="black"> Hello SVG! </text> <text x="50" y="100" font-size="18" font-weight="bold" fill="blue"> Bold Text </text> <text x="50" y="150" font-size="16" font-style="italic" fill="red"> Italic Text </text></svg>2. 文本对齐使用 text-anchor 属性控制文本对齐。<svg width="300" height="200"> <line x1="150" y1="20" x2="150" y2="180" stroke="gray" stroke-dasharray="5,5" /> <text x="150" y="50" text-anchor="start" font-size="16"> Start aligned </text> <text x="150" y="100" text-anchor="middle" font-size="16"> Middle aligned </text> <text x="150" y="150" text-anchor="end" font-size="16"> End aligned </text></svg>3. 多行文本使用 <tspan> 元素创建多行文本。<svg width="300" height="200"> <text x="50" y="50" font-size="16"> <tspan x="50" dy="0">First line</tspan> <tspan x="50" dy="25">Second line</tspan> <tspan x="50" dy="25">Third line</tspan> </text></svg>4. 文本路径让文本沿着路径显示。<svg width="300" height="200"> <defs> <path id="textPath" d="M 50,100 Q 150,50 250,100" fill="none" stroke="gray" /> </defs> <text font-size="20" fill="blue"> <textPath href="#textPath"> Text along a curved path </textPath> </text></svg>5. 文本样式属性常用的文本样式属性。<svg width="300" height="300"> <text x="50" y="40" font-size="24" font-family="Arial" fill="black"> Font Size 24 </text> <text x="50" y="80" font-size="18" font-weight="bold" fill="blue"> Bold Text </text> <text x="50" y="120" font-size="16" font-style="italic" fill="red"> Italic Text </text> <text x="50" y="160" font-size="20" text-decoration="underline" fill="green"> Underlined Text </text> <text x="50" y="200" font-size="20" letter-spacing="5" fill="purple"> Spaced Out </text> <text x="50" y="240" font-size="20" word-spacing="10" fill="orange"> Word Spacing </text></svg>6. 文本变换使用 transform 属性变换文本。<svg width="300" height="300"> <text x="150" y="50" font-size="20" text-anchor="middle" fill="blue"> Normal Text </text> <text x="150" y="100" font-size="20" text-anchor="middle" transform="rotate(-10, 150, 100)" fill="red"> Rotated Text </text> <text x="150" y="150" font-size="20" text-anchor="middle" transform="scale(1.5, 1)" fill="green"> Scaled Text </text> <text x="150" y="200" font-size="20" text-anchor="middle" transform="skewX(-10)" fill="purple"> Skewed Text </text></svg>7. 文本描边为文本添加描边效果。<svg width="300" height="200"> <text x="50" y="80" font-size="48" font-weight="bold" fill="none" stroke="blue" stroke-width="2"> Outlined Text </text> <text x="50" y="150" font-size="48" font-weight="bold" fill="yellow" stroke="red" stroke-width="3"> Filled and Outlined </text></svg>8. 文本渐变使用渐变填充文本。<svg width="300" height="200"> <defs> <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#ff6b6b" /> <stop offset="50%" stop-color="#4ecdc4" /> <stop offset="100%" stop-color="#45b7d1" /> </linearGradient> </defs> <text x="50" y="100" font-size="48" font-weight="bold" fill="url(#textGradient)"> Gradient Text </text></svg>9. 文本阴影使用滤镜为文本添加阴影。<svg width="300" height="200"> <defs> <filter id="textShadow"> <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="#000" flood-opacity="0.5" /> </filter> </defs> <text x="50" y="100" font-size="48" font-weight="bold" fill="blue" filter="url(#textShadow)"> Shadow Text </text></svg>10. 垂直文本使用 writing-mode 属性创建垂直文本。<svg width="300" height="300"> <text x="50" y="50" font-size="20" writing-mode="tb" fill="black"> 垂直文本 </text> <text x="150" y="50" font-size="20" writing-mode="tb" fill="blue"> Vertical Text </text></svg>最佳实践：使用适当的字体大小和行高考虑文本的可读性和对比度使用 text-anchor 实现精确对齐合理使用文本路径创建创意效果为文本添加适当的可访问性支持测试跨浏览器兼容性考虑使用 Web 字体提升视觉效果

SVG 的可访问性（Accessibility）对于创建包容性的网页应用非常重要。以下是实现 SVG 可访问性的关键方法：1. 添加标题和描述为 SVG 添加 <title> 和 <desc> 元素，提供文本描述。<svg width="200" height="200" role="img" aria-labelledby="svg-title svg-desc"> <title id="svg-title">销售数据柱状图</title> <desc id="svg-desc">显示2024年四个季度的销售数据柱状图，Q1为100万，Q2为150万，Q3为120万，Q4为180万</desc> <rect x="20" y="80" width="40" height="100" fill="blue" /> <rect x="80" y="50" width="40" height="130" fill="green" /> <rect x="140" y="60" width="40" height="120" fill="red" /> <rect x="200" y="30" width="40" height="150" fill="yellow" /></svg>2. 使用 ARIA 角色为 SVG 添加适当的 ARIA 角色。<!-- 图标 --><svg role="img" aria-label="搜索图标"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg><!-- 装饰性图形 --><svg role="presentation" aria-hidden="true"> <circle cx="50" cy="50" r="40" fill="blue" /></svg>3. 键盘导航为交互式 SVG 添加键盘支持。<svg width="200" height="200" tabindex="0" role="button" aria-label="点击切换颜色"> <circle id="interactive-circle" cx="100" cy="100" r="50" fill="blue" /></svg><script>const circle = document.getElementById('interactive-circle');const svg = circle.parentElement;// 鼠标点击svg.addEventListener('click', toggleColor);// 键盘支持svg.addEventListener('keydown', function(event) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleColor(); }});function toggleColor() { const currentColor = circle.getAttribute('fill'); const newColor = currentColor === 'blue' ? 'red' : 'blue'; circle.setAttribute('fill', newColor);}</script>4. 焦点管理为可交互元素添加焦点样式。svg[tabindex]:focus { outline: 3px solid #005fcc; outline-offset: 2px;}svg[tabindex]:focus circle { stroke: #005fcc; stroke-width: 3;}5. 语义化结构使用语义化的 SVG 元素结构。<svg role="img" aria-labelledby="chart-title chart-desc"> <title id="chart-title">月度销售趋势图</title> <desc id="chart-desc">折线图显示1月到12月的销售趋势</desc> <g role="list" aria-label="数据点"> <g role="listitem" aria-label="1月销售额：50万"> <circle cx="50" cy="150" r="5" fill="blue" /> <text x="50" y="170" font-size="12">1月</text> </g> <g role="listitem" aria-label="2月销售额：80万"> <circle cx="100" cy="120" r="5" fill="blue" /> <text x="100" y="140" font-size="12">2月</text> </g> </g></svg>6. 颜色对比度确保 SVG 元素的颜色对比度符合 WCAG 标准。/* 确保足够的对比度 */.high-contrast { fill: #000000; /* 黑色 */ stroke: #FFFFFF; /* 白色 */ stroke-width: 2;}/* 避免仅依赖颜色传达信息 */.data-point { fill: #3366cc;}.data-point:hover { fill: #ff6600; stroke: #000000; stroke-width: 2;}7. 响应式文本确保 SVG 中的文本可缩放且可读。<svg viewBox="0 0 200 100" width="100%" height="auto"> <text x="100" y="50" font-size="16" text-anchor="middle" font-family="Arial, sans-serif"> 可读的文本 </text></svg>8. 替代文本为外部 SVG 文件提供替代文本。<img src="chart.svg" alt="显示2024年销售数据的柱状图" />最佳实践：始终为有意义的 SVG 添加 title 和 desc使用适当的 ARIA 角色为交互式元素添加键盘支持确保颜色对比度符合 WCAG 标准测试屏幕阅读器兼容性避免仅依赖颜色传达信息为装饰性 SVG 添加 aria-hidden="true"

SVG 的性能优化对于提升网页加载速度和用户体验至关重要。以下是 SVG 性能优化的详细策略：1. 文件大小优化移除不必要的代码：# 使用 SVGO 优化 SVGnpx svgo input.svg -o output.svg# 批量优化npx svgo -f ./icons -o ./optimized# 配置优化选项npx svgo --config svgo.config.js input.svg -o output.svgSVGO 配置示例：// svgo.config.jsmodule.exports = { plugins: [ 'removeDoctype', 'removeXMLProcInst', 'removeComments', 'removeMetadata', 'removeUselessDefs', 'cleanupIDs', 'minifyStyles', 'convertPathData', 'mergePaths', 'removeUnusedNS', 'sortDefsChildren', 'removeEmptyAttrs', 'removeEmptyContainers', 'cleanupNumericValues', 'convertColors', 'removeUnknownsAndDefaults' ]};2. 路径优化简化路径命令：<!-- 优化前 --><path d="M 10.123456 20.654321 L 30.987654 40.321098" /><!-- 优化后 --><path d="M10.12 20.65L30.99 40.32" />使用相对坐标：<!-- 使用绝对坐标 --><path d="M 10 10 L 20 10 L 20 20 L 10 20 Z" /><!-- 使用相对坐标（更简洁）--><path d="M10 10h10v10h-10z" />合并路径：<!-- 优化前 --><rect x="10" y="10" width="50" height="50" fill="blue" /><rect x="70" y="10" width="50" height="50" fill="blue" /><!-- 优化后（使用 path）--><path d="M10 10h50v50H10z M70 10h50v50H70z" fill="blue" />3. 渲染性能优化减少元素数量：<!-- 优化前：多个独立元素 --><circle cx="10" cy="10" r="5" fill="blue" /><circle cx="20" cy="10" r="5" fill="blue" /><circle cx="30" cy="10" r="5" fill="blue" /><!-- 优化后：使用 group --><g fill="blue"> <circle cx="10" cy="10" r="5" /> <circle cx="20" cy="10" r="5" /> <circle cx="30" cy="10" r="5" /></g>使用 CSS 代替 SVG 属性：<!-- 优化前 --><circle cx="50" cy="50" r="40" fill="blue" stroke="red" stroke-width="2" /><!-- 优化后：使用 CSS --><style>.circle { fill: blue; stroke: red; stroke-width: 2px;}</style><circle class="circle" cx="50" cy="50" r="40" />4. 动画性能优化优先使用 CSS 动画：/* CSS 动画（GPU 加速）*/.animated { animation: rotate 2s linear infinite; transform-origin: center;}@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}避免动画 width/height：/* 优化前：动画 width/height（性能差）*/.bad { animation: scale 1s ease;}@keyframes scale { from { width: 50px; height: 50px; } to { width: 100px; height: 100px; }}/* 优化后：动画 transform（性能好）*/.good { animation: scale 1s ease;}@keyframes scale { from { transform: scale(1); } to { transform: scale(2); }}5. 滤镜性能优化避免过度使用滤镜：<!-- 避免复杂的滤镜链 --><filter id="complex"> <feGaussianBlur stdDeviation="5" /> <feOffset dx="5" dy="5" /> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> <feMerge> <feMergeNode in="SourceGraphic" /> <feMergeNode /> </feMerge></filter><!-- 简化滤镜或使用 CSS --><style>.shadow { filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.3));}</style>6. 加载优化内联关键 SVG：<!-- 首屏关键 SVG 内联 --><header> <svg viewBox="0 0 24 24" width="24" height="24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> </svg></header><!-- 非关键 SVG 延迟加载 --><img src="non-critical.svg" loading="lazy" alt="Non-critical" />使用 SVG Sprite：<!-- 合并多个图标到一个文件 --><svg style="display: none;"> <symbol id="icon1" viewBox="0 0 24 24">...</symbol> <symbol id="icon2" viewBox="0 0 24 24">...</symbol> <symbol id="icon3" viewBox="0 0 24 24">...</symbol></svg><!-- 使用图标 --><svg><use href="#icon1" /></svg><svg><use href="#icon2" /></svg>7. 压缩和缓存服务器配置：# Nginx 配置location ~* \.(svg)$ { gzip on; gzip_vary on; gzip_min_length 1000; gzip_types image/svg+xml; expires 1y; add_header Cache-Control "public, immutable";}8. 监控和测试性能测试工具：Lighthouse：测试整体性能WebPageTest：分析加载性能Chrome DevTools：监控渲染性能最佳实践：定期使用 SVGO 优化 SVG 文件优先使用 CSS 动画减少元素数量和复杂度合理使用滤镜和渐变内联关键 SVG，延迟加载其他启用 gzip 压缩设置适当的缓存策略监控性能指标

SVG 裁剪和蒙版是创建复杂图形效果的重要工具。以下是 SVG 裁剪和蒙版的使用方法：1. 裁剪路径（clipPath）使用 <clipPath> 元素定义裁剪区域，只有裁剪区域内的内容才会显示。<svg width="200" height="200"> <defs> <clipPath id="myClip"> <circle cx="100" cy="100" r="80" /> </clipPath> </defs> <rect x="0" y="0" width="200" height="200" fill="blue" clip-path="url(#myClip)" /></svg>2. 裁剪路径示例使用不同形状作为裁剪路径。<svg width="300" height="200"> <defs> <clipPath id="circleClip"> <circle cx="100" cy="100" r="80" /> </clipPath> <clipPath id="rectClip"> <rect x="20" y="20" width="160" height="160" rx="20" /> </clipPath> <clipPath id="starClip"> <polygon points="100,10 40,198 190,78 10,78 160,198" /> </clipPath> </defs> <rect x="0" y="0" width="200" height="200" fill="blue" clip-path="url(#circleClip)" /> <rect x="200" y="0" width="200" height="200" fill="green" clip-path="url(#rectClip)" /> <rect x="400" y="0" width="200" height="200" fill="red" clip-path="url(#starClip)" /></svg>3. 蒙版（mask）使用 <mask> 元素创建蒙版效果，蒙版的透明度决定内容的显示程度。<svg width="200" height="200"> <defs> <mask id="myMask"> <rect x="0" y="0" width="200" height="200" fill="white" /> <circle cx="100" cy="100" r="50" fill="black" /> </mask> </defs> <rect x="0" y="0" width="200" height="200" fill="blue" mask="url(#myMask)" /></svg>4. 蒙版透明度使用不同的透明度创建渐变蒙版效果。<svg width="200" height="200"> <defs> <linearGradient id="maskGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="white" /> <stop offset="100%" stop-color="black" /> </linearGradient> <mask id="fadeMask"> <rect x="0" y="0" width="200" height="200" fill="url(#maskGradient)" /> </mask> </defs> <rect x="0" y="0" width="200" height="200" fill="blue" mask="url(#fadeMask)" /></svg>5. 裁剪与蒙版的区别裁剪（clipPath）：只显示裁剪区域内的内容，区域外完全隐藏蒙版（mask）：根据蒙版的透明度控制内容的显示程度，可以创建渐变效果6. 组合使用结合裁剪和蒙版创建复杂效果。<svg width="200" height="200"> <defs> <clipPath id="circleClip"> <circle cx="100" cy="100" r="80" /> </clipPath> <mask id="fadeMask"> <rect x="0" y="0" width="200" height="200" fill="url(#maskGradient)" /> </mask> <linearGradient id="maskGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="white" /> <stop offset="100%" stop-color="black" /> </linearGradient> </defs> <rect x="0" y="0" width="200" height="200" fill="blue" clip-path="url(#circleClip)" mask="url(#fadeMask)" /></svg>7. 动态裁剪使用 JavaScript 动态修改裁剪路径。<svg width="200" height="200"> <defs> <clipPath id="dynamicClip"> <circle id="clipCircle" cx="100" cy="100" r="50" /> </clipPath> </defs> <rect id="clippedRect" x="0" y="0" width="200" height="200" fill="blue" clip-path="url(#dynamicClip)" /></svg><script>const clipCircle = document.getElementById('clipCircle');let radius = 50;let growing = true;function animateClip() { if (growing) { radius += 1; if (radius >= 80) growing = false; } else { radius -= 1; if (radius <= 50) growing = true; } clipCircle.setAttribute('r', radius); requestAnimationFrame(animateClip);}animateClip();</script>8. 文本裁剪使用文本作为裁剪路径。<svg width="300" height="200"> <defs> <clipPath id="textClip"> <text x="150" y="100" font-size="48" font-weight="bold" text-anchor="middle"> SVG </text> </clipPath> </defs> <rect x="0" y="0" width="300" height="200" fill="url(#gradient)" clip-path="url(#textClip)" /> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#ff6b6b" /> <stop offset="100%" stop-color="#4ecdc4" /> </linearGradient> </defs></svg>9. 图片裁剪使用 SVG 裁剪外部图片。<svg width="200" height="200"> <defs> <clipPath id="imageClip"> <circle cx="100" cy="100" r="80" /> </clipPath> </defs> <image href="photo.jpg" x="0" y="0" width="200" height="200" clip-path="url(#imageClip)" /></svg>最佳实践：合理选择裁剪或蒙版，根据需求决定使用裁剪实现简单的形状裁剪使用蒙版实现渐变和透明度效果考虑性能，避免过度使用复杂裁剪测试跨浏览器兼容性为裁剪和蒙版添加有意义的 ID

SVG 路径是 SVG 中最强大和灵活的元素，使用 <path> 标签和 d 属性来定义。路径命令由字母和数字组成，可以分为以下几类：1. 移动命令（M, m）M x y：移动到绝对坐标 (x, y)m dx dy：移动到相对坐标（相对于当前位置）用途：开始新的路径段，不绘制线条2. 直线命令（L, l, H, h, V, v）L x y：绘制直线到绝对坐标 (x, y)l dx dy：绘制直线到相对坐标H x：水平线到绝对 x 坐标h dx：水平线到相对 x 坐标V y：垂直线到绝对 y 坐标v dy：垂直线到相对 y 坐标3. 曲线命令三次贝塞尔曲线（C, c, S, s）C x1 y1, x2 y2, x y：使用两个控制点 (x1,y1) 和 (x2,y2) 绘制到 (x,y)c dx1 dy1, dx2 dy2, dx dy：相对坐标版本S x2 y2, x y：平滑曲线，自动推断第一个控制点s dx2 dy2, dx dy：相对坐标版本二次贝塞尔曲线（Q, q, T, t）Q x1 y1, x y：使用一个控制点 (x1,y1) 绘制到 (x,y)q dx1 dy1, dx dy：相对坐标版本T x y：平滑曲线，自动推断控制点t dx dy：相对坐标版本椭圆弧（A, a）A rx ry x-axis-rotation large-arc-flag sweep-flag x y参数：rx, ry（椭圆半径）、x-axis-rotation（旋转角度）、large-arc-flag（大弧标志）、sweep-flag（绘制方向）、x, y（终点坐标）4. 闭合命令（Z, z）Z 或 z：闭合路径，连接到起点自动绘制一条直线回到起点示例路径：<svg viewBox="0 0 100 100"> <!-- 心形路径 --> <path d="M 50 90 C 20 60, 0 30, 30 30 C 40 30, 50 40, 50 50 C 50 40, 60 30, 70 30 C 100 30, 80 60, 50 90 Z" fill="red" /></svg>最佳实践：大写字母表示绝对坐标，小写字母表示相对坐标可以省略命令字母之间的空格和逗号连续的相同命令可以省略命令字母使用相对坐标可以简化路径定义