面试题手册

SVG 图表是数据可视化的重要工具，可以创建各种类型的图表。以下是使用 SVG 创建图表的方法：1. 柱状图使用 <rect> 元素创建柱状图。<svg width="400" height="300" viewBox="0 0 400 300"> <!-- 坐标轴 --> <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" /> <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" /> <!-- 柱子 --> <rect x="70" y="100" width="40" height="150" fill="#3498db" /> <rect x="130" y="80" width="40" height="170" fill="#e74c3c" /> <rect x="190" y="120" width="40" height="130" fill="#2ecc71" /> <rect x="250" y="60" width="40" height="190" fill="#f39c12" /> <rect x="310" y="90" width="40" height="160" fill="#9b59b6" /> <!-- 标签 --> <text x="90" y="270" text-anchor="middle" font-size="12">Q1</text> <text x="150" y="270" text-anchor="middle" font-size="12">Q2</text> <text x="210" y="270" text-anchor="middle" font-size="12">Q3</text> <text x="270" y="270" text-anchor="middle" font-size="12">Q4</text> <text x="330" y="270" text-anchor="middle" font-size="12">Q5</text></svg>2. 折线图使用 <polyline> 或 <path> 元素创建折线图。<svg width="400" height="300" viewBox="0 0 400 300"> <!-- 坐标轴 --> <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" /> <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" /> <!-- 网格线 --> <line x1="50" y1="200" x2="380" y2="200" stroke="gray" stroke-dasharray="5,5" /> <line x1="50" y1="150" x2="380" y2="150" stroke="gray" stroke-dasharray="5,5" /> <line x1="50" y1="100" x2="380" y2="100" stroke="gray" stroke-dasharray="5,5" /> <!-- 折线 --> <polyline points="70,200 130,150 190,180 250,100 310,120" fill="none" stroke="#3498db" stroke-width="3" /> <!-- 数据点 --> <circle cx="70" cy="200" r="5" fill="#3498db" /> <circle cx="130" cy="150" r="5" fill="#3498db" /> <circle cx="190" cy="180" r="5" fill="#3498db" /> <circle cx="250" cy="100" r="5" fill="#3498db" /> <circle cx="310" cy="120" r="5" fill="#3498db" /></svg>3. 饼图使用 <path> 元素创建饼图。<svg width="300" height="300" viewBox="0 0 300 300"> <g transform="translate(150, 150)"> <!-- 扇形 1: 30% --> <path d="M 0 0 L 0 -100 A 100 100 0 0 1 95.1 -30.9 Z" fill="#3498db" /> <!-- 扇形 2: 25% --> <path d="M 0 0 L 95.1 -30.9 A 100 100 0 0 1 58.8 80.9 Z" fill="#e74c3c" /> <!-- 扇形 3: 20% --> <path d="M 0 0 L 58.8 80.9 A 100 100 0 0 1 -58.8 80.9 Z" fill="#2ecc71" /> <!-- 扇形 4: 15% --> <path d="M 0 0 L -58.8 80.9 A 100 100 0 0 1 -95.1 -30.9 Z" fill="#f39c12" /> <!-- 扇形 5: 10% --> <path d="M 0 0 L -95.1 -30.9 A 100 100 0 0 1 0 -100 Z" fill="#9b59b6" /> </g></svg>4. 散点图使用 <circle> 元素创建散点图。<svg width="400" height="300" viewBox="0 0 400 300"> <!-- 坐标轴 --> <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" /> <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" /> <!-- 数据点 --> <circle cx="80" cy="200" r="5" fill="#3498db" /> <circle cx="120" cy="150" r="5" fill="#3498db" /> <circle cx="160" cy="180" r="5" fill="#3498db" /> <circle cx="200" cy="100" r="5" fill="#3498db" /> <circle cx="240" cy="120" r="5" fill="#3498db" /> <circle cx="280" cy="80" r="5" fill="#3498db" /> <circle cx="320" cy="140" r="5" fill="#3498db" /> <circle cx="360" cy="60" r="5" fill="#3498db" /></svg>5. 面积图使用 <path> 元素创建面积图。<svg width="400" height="300" viewBox="0 0 400 300"> <!-- 坐标轴 --> <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" /> <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" /> <!-- 面积 --> <path d="M 70 200 L 130 150 L 190 180 L 250 100 L 310 120 L 310 250 L 70 250 Z" fill="#3498db" opacity="0.5" /> <!-- 折线 --> <polyline points="70,200 130,150 190,180 250,100 310,120" fill="none" stroke="#3498db" stroke-width="3" /></svg>6. 动态图表使用 JavaScript 创建动态图表。function createBarChart(data, containerId) { const svgNS = 'http://www.w3.org/2000/svg'; const container = document.getElementById(containerId); const svg = document.createElementNS(svgNS, 'svg'); svg.setAttribute('width', '400'); svg.setAttribute('height', '300'); svg.setAttribute('viewBox', '0 0 400 300'); const maxValue = Math.max(...data); const barWidth = 40; const gap = 20; const startX = 50; const startY = 250; data.forEach((value, index) => { const height = (value / maxValue) * 200; const x = startX + index * (barWidth + gap); const y = startY - height; const rect = document.createElementNS(svgNS, 'rect'); rect.setAttribute('x', x); rect.setAttribute('y', y); rect.setAttribute('width', barWidth); rect.setAttribute('height', height); rect.setAttribute('fill', `hsl(${index * 60}, 70%, 50%)`); svg.appendChild(rect); }); container.appendChild(svg);}// 使用示例const data = [100, 150, 120, 180, 90];createBarChart(data, 'chart-container');最佳实践：使用 viewBox 实现响应式图表添加适当的标签和图例使用颜色区分不同数据系列考虑添加交互效果（hover、tooltip）优化性能，避免过多元素为图表添加可访问性支持使用 CSS 动画增强视觉效果

SVG 在响应式设计中有独特的优势和应用方式，可以创建适应各种屏幕尺寸的图形：1. 使用 viewBox 实现响应式viewBox 是 SVG 响应式设计的核心，定义了内部坐标系。<svg viewBox="0 0 100 100" width="100%" height="auto"> <circle cx="50" cy="50" r="40" fill="blue" /></svg>关键点：viewBox 定义内部坐标系width/height 使用百分比或 autoSVG 会根据容器自动缩放2. preserveAspectRatio 控制缩放行为控制 SVG 如何适应容器。<!-- 保持比例，完整显示 --><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" width="100%" height="100%"><!-- 保持比例，填充容器 --><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" width="100%" height="100%"><!-- 拉伸填充 --><svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%">3. 响应式图标系统创建可缩放的图标系统。<!-- 图标定义 --><svg style="display: none;"> <symbol id="icon-home" viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/> </symbol> <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></svg><!-- 使用图标，自动适应容器 --><svg class="icon" width="24" height="24"> <use href="#icon-home"/></svg><svg class="icon" width="48" height="48"> <use href="#icon-search"/></svg>CSS 样式：.icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle;}/* 不同尺寸的图标 */.icon-sm { width: 16px; height: 16px;}.icon-md { width: 24px; height: 24px;}.icon-lg { width: 48px; height: 48px;}4. 响应式图表创建适应屏幕的图表。<svg viewBox="0 0 400 200" width="100%" height="auto" preserveAspectRatio="xMidYMid meet"> <!-- 柱状图 --> <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="30" width="40" height="150" fill="red" /> <rect x="200" y="60" width="40" height="120" fill="yellow" /> <!-- 坐标轴 --> <line x1="10" y1="190" x2="390" y2="190" stroke="black" stroke-width="2"/> <line x1="10" y1="10" x2="10" y2="190" stroke="black" stroke-width="2"/></svg>5. 媒体查询结合 SVG使用 CSS 媒体查询调整 SVG 显示。/* 小屏幕 */@media (max-width: 768px) { .responsive-svg { width: 100%; height: auto; }}/* 大屏幕 */@media (min-width: 769px) { .responsive-svg { width: 50%; height: auto; }}6. 响应式背景 SVG使用 SVG 作为响应式背景。.hero-section { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%233498db"/></svg>'); background-size: cover; background-position: center; background-repeat: no-repeat;}7. JavaScript 动态调整使用 JavaScript 根据容器动态调整 SVG。function resizeSVG() { const container = document.querySelector('.svg-container'); const svg = container.querySelector('svg'); const containerWidth = container.offsetWidth; const containerHeight = container.offsetHeight; svg.setAttribute('width', containerWidth); svg.setAttribute('height', containerHeight);}window.addEventListener('resize', resizeSVG);resizeSVG(); // 初始化最佳实践：始终使用 viewBox合理使用 preserveAspectRatio考虑移动端性能使用 CSS 控制尺寸测试各种屏幕尺寸优化 SVG 文件大小

SVG 在移动端的应用需要特别注意性能、兼容性和用户体验。以下是 SVG 在移动端开发的最佳实践：1. 响应式设计使用 viewBox 实现响应式：<svg viewBox="0 0 100 100" width="100%" height="auto"> <circle cx="50" cy="50" r="40" fill="blue" /></svg>使用媒体查询调整 SVG：/* 小屏幕 */@media (max-width: 768px) { .mobile-svg { width: 100%; height: auto; }}/* 大屏幕 */@media (min-width: 769px) { .mobile-svg { width: 50%; height: auto; }}2. 触摸事件支持添加触摸事件：const svg = document.querySelector('svg');// 触摸开始svg.addEventListener('touchstart', function(event) { event.preventDefault(); const touch = event.touches[0]; const point = svg.createSVGPoint(); point.x = touch.clientX; point.y = touch.clientY; const svgPoint = point.matrixTransform(svg.getScreenCTM().inverse()); console.log('Touch start:', svgPoint);});// 触摸移动svg.addEventListener('touchmove', function(event) { event.preventDefault(); const touch = event.touches[0]; // 处理触摸移动});// 触摸结束svg.addEventListener('touchend', function(event) { event.preventDefault(); // 处理触摸结束});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 动画代替 SMIL：/* CSS 动画（性能更好）*/.mobile-animated { animation: pulse 1s ease-in-out infinite;}@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); }}4. 移动端特定优化优化触摸目标大小：<svg width="44" height="44" viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor" /></svg>使用合适的字体大小：<svg width="200" height="100" viewBox="0 0 200 100"> <text x="100" y="50" font-size="16" text-anchor="middle"> 移动端文本 </text></svg>5. 电池优化减少动画复杂度：/* 简单的动画（省电）*/.simple-anim { animation: fade 0.3s ease;}@keyframes fade { from { opacity: 0; } to { opacity: 1; }}/* 避免复杂的动画（耗电）*/.complex-anim { /* 避免在移动端使用 */}使用 prefers-reduced-motion：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}6. 网络优化延迟加载非关键 SVG：<!-- 关键 SVG 立即加载 --><svg class="critical" viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></svg><!-- 非关键 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></svg><!-- 使用图标 --><svg><use href="#icon1" /></svg>7. 兼容性处理检测 SVG 支持：function supportsSVG() { return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;}if (!supportsSVG()) { // 回退到 PNG document.querySelector('.svg-icon').src = 'icon.png';}提供回退方案：<picture> <source type="image/svg+xml" srcset="icon.svg" /> <img src="icon.png" alt="Icon" /></picture>8. 可访问性添加适当的 ARIA 属性：<svg role="img" aria-labelledby="svg-title svg-desc" tabindex="0"> <title id="svg-title">图标</title> <desc id="svg-desc">点击打开菜单</desc> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>支持屏幕阅读器：const svg = document.querySelector('svg');svg.setAttribute('role', 'img');svg.setAttribute('aria-label', '搜索图标');9. 调试和测试使用 Chrome DevTools 调试：检查渲染性能监控内存使用测试触摸事件在真实设备上测试：iOS SafariAndroid Chrome各种屏幕尺寸不同网络条件最佳实践：始终使用 viewBox 实现响应式优化触摸目标大小（至少 44x44px）减少动画复杂度以节省电池延迟加载非关键 SVG提供适当的回退方案添加可访问性支持在真实设备上测试监控性能指标

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"