SVG数据可视化矢量图形的艺术与技术前言大家好我是前端老炮儿。今天咱们来聊聊SVG数据可视化SVGScalable Vector Graphics是一种基于XML的矢量图形格式它可以无损缩放非常适合用于数据可视化。相比于CanvasSVG具有更好的可访问性和可维护性。今天我就带大家深入了解SVG数据可视化的艺术与技术SVG简介什么是SVGSVG是一种用于描述二维矢量图形的XML标记语言。它可以创建各种图形包括线条、矩形、圆形、路径等。SVG的优势矢量图形无损缩放清晰度不受影响可访问性可以被屏幕阅读器读取可维护性基于XML易于修改和维护交互性支持事件绑定和动画SEO友好搜索引擎可以索引SVG内容基础SVG图形1. 矩形 (rect)svg width200 height100 rect x10 y10 width100 height50 fillblue strokeblack stroke-width2 rx5 ry5 / /svg2. 圆形 (circle)svg width200 height200 circle cx100 cy100 r50 fillred strokeblack stroke-width2 / /svg3. 椭圆 (ellipse)svg width200 height150 ellipse cx100 cy75 rx80 ry50 fillgreen / /svg4. 线条 (line)svg width200 height100 line x110 y150 x2190 y250 strokeblack stroke-width2 / /svg5. 路径 (path)svg width200 height200 path dM 100 10 L 150 90 L 50 90 Z fillpurple strokeblack stroke-width2 / /svgSVG动画CSS动画svg width200 height200 circle cx100 cy100 r50 fillblue animate attributeNamer from50 to80 dur2s repeatCountindefinite / /circle /svgJavaScript动画const circle document.querySelector(circle) let radius 50 let direction 1 function animate() { radius direction * 2 if (radius 80 || radius 30) { direction * -1 } circle.setAttribute(r, radius) requestAnimationFrame(animate) } animate()SVG数据可视化实战案例1柱状图svg width400 height300 g transformtranslate(50, 250) rect x0 y-50 width50 height50 fill#3498db / rect x70 y-80 width50 height80 fill#e74c3c / rect x140 y-120 width50 height120 fill#2ecc71 / rect x210 y-60 width50 height60 fill#f39c12 / rect x280 y-90 width50 height90 fill#9b59b6 / line x10 y10 x2330 y20 strokeblack stroke-width2 / line x10 y10 x20 y2-150 strokeblack stroke-width2 / /g /svg案例2饼图function createPieChart(data, colors) { const total data.reduce((sum, val) sum val, 0) let currentAngle 0 const paths data.map((value, index) { const angle (value / total) * 360 const startAngle currentAngle const endAngle currentAngle angle const startRad (startAngle - 90) * Math.PI / 180 const endRad (endAngle - 90) * Math.PI / 180 const x1 100 80 * Math.cos(startRad) const y1 100 80 * Math.sin(startRad) const x2 100 80 * Math.cos(endRad) const y2 100 80 * Math.sin(endRad) const largeArcFlag angle 180 ? 1 : 0 const d M 100 100 L ${x1} ${y1} A 80 80 0 ${largeArcFlag} 1 ${x2} ${y2} Z currentAngle endAngle return path d${d} fill${colors[index]} / }) return svg width200 height200${paths.join()}/svg } const data [30, 50, 20] const colors [#3498db, #e74c3c, #2ecc71] document.body.innerHTML createPieChart(data, colors)案例3折线图function createLineChart(data) { const padding 50 const width 400 const height 300 const maxValue Math.max(...data) const minValue Math.min(...data) const range maxValue - minValue || 1 const points data.map((value, index) { const x padding (index / (data.length - 1)) * (width - 2 * padding) const y height - padding - ((value - minValue) / range) * (height - 2 * padding) return ${x},${y} }) const pathD M ${points.join( L )} return svg width${width} height${height} line x1${padding} y1${padding} x2${padding} y2${height - padding} strokeblack / line x1${padding} y1${height - padding} x2${width - padding} y2${height - padding} strokeblack / path d${pathD} fillnone stroke#3498db stroke-width2 / ${points.map(point { const [x, y] point.split(,).map(Number) return circle cx${x} cy${y} r4 fill#3498db / }).join()} /svg } const data [10, 20, 15, 25, 30, 22, 35] document.body.innerHTML createLineChart(data)SVG与CSS结合使用CSS样式svg .bar { fill: #3498db; transition: fill 0.3s ease; } svg .bar:hover { fill: #2980b9; } svg text { font-family: Arial, sans-serif; font-size: 12px; fill: #333; }svg width400 height300 rect classbar x50 y200 width50 height80 / rect classbar x120 y150 width50 height130 / text x60 y295Jan/text text x130 y295Feb/text /svgSVG的可访问性添加ARIA属性svg roleimg aria-labelSales chart showing monthly revenue titleSales Chart/title descA bar chart showing monthly sales data from January to December/desc rect aria-labelJanuary sales: $1000 / /svg使用title和desc元素svg titleMonthly Sales/title descThis chart displays sales data for the past year/desc /svg性能优化1. 使用defs和usesvg defs circle iddot cx5 cy5 r5 fillblue / /defs use href#dot x10 y10 / use href#dot x30 y10 / use href#dot x50 y10 / /svg2. 简化路径function simplifyPath(path, tolerance) { // Ramer-Douglas-Peucker算法简化路径 }3. 使用CSS transformssvg .group { transform: translate(100px, 100px); }总结通过今天的学习我们深入了解了SVG数据可视化基础图形矩形、圆形、椭圆、线条、路径动画效果CSS动画和JavaScript动画实战案例柱状图、饼图、折线图CSS结合样式和交互可访问性ARIA属性和语义化标签性能优化defs复用、路径简化、transformsSVG是一种强大的数据可视化工具特别适合需要高质量、可访问的图形场景。希望今天的分享能帮助你更好地使用SVG最后给大家留个思考题SVG和Canvas各有什么优缺点在什么场景下你会选择使用SVG欢迎在评论区留言讨论
SVG数据可视化：矢量图形的艺术与技术
SVG数据可视化矢量图形的艺术与技术前言大家好我是前端老炮儿。今天咱们来聊聊SVG数据可视化SVGScalable Vector Graphics是一种基于XML的矢量图形格式它可以无损缩放非常适合用于数据可视化。相比于CanvasSVG具有更好的可访问性和可维护性。今天我就带大家深入了解SVG数据可视化的艺术与技术SVG简介什么是SVGSVG是一种用于描述二维矢量图形的XML标记语言。它可以创建各种图形包括线条、矩形、圆形、路径等。SVG的优势矢量图形无损缩放清晰度不受影响可访问性可以被屏幕阅读器读取可维护性基于XML易于修改和维护交互性支持事件绑定和动画SEO友好搜索引擎可以索引SVG内容基础SVG图形1. 矩形 (rect)svg width200 height100 rect x10 y10 width100 height50 fillblue strokeblack stroke-width2 rx5 ry5 / /svg2. 圆形 (circle)svg width200 height200 circle cx100 cy100 r50 fillred strokeblack stroke-width2 / /svg3. 椭圆 (ellipse)svg width200 height150 ellipse cx100 cy75 rx80 ry50 fillgreen / /svg4. 线条 (line)svg width200 height100 line x110 y150 x2190 y250 strokeblack stroke-width2 / /svg5. 路径 (path)svg width200 height200 path dM 100 10 L 150 90 L 50 90 Z fillpurple strokeblack stroke-width2 / /svgSVG动画CSS动画svg width200 height200 circle cx100 cy100 r50 fillblue animate attributeNamer from50 to80 dur2s repeatCountindefinite / /circle /svgJavaScript动画const circle document.querySelector(circle) let radius 50 let direction 1 function animate() { radius direction * 2 if (radius 80 || radius 30) { direction * -1 } circle.setAttribute(r, radius) requestAnimationFrame(animate) } animate()SVG数据可视化实战案例1柱状图svg width400 height300 g transformtranslate(50, 250) rect x0 y-50 width50 height50 fill#3498db / rect x70 y-80 width50 height80 fill#e74c3c / rect x140 y-120 width50 height120 fill#2ecc71 / rect x210 y-60 width50 height60 fill#f39c12 / rect x280 y-90 width50 height90 fill#9b59b6 / line x10 y10 x2330 y20 strokeblack stroke-width2 / line x10 y10 x20 y2-150 strokeblack stroke-width2 / /g /svg案例2饼图function createPieChart(data, colors) { const total data.reduce((sum, val) sum val, 0) let currentAngle 0 const paths data.map((value, index) { const angle (value / total) * 360 const startAngle currentAngle const endAngle currentAngle angle const startRad (startAngle - 90) * Math.PI / 180 const endRad (endAngle - 90) * Math.PI / 180 const x1 100 80 * Math.cos(startRad) const y1 100 80 * Math.sin(startRad) const x2 100 80 * Math.cos(endRad) const y2 100 80 * Math.sin(endRad) const largeArcFlag angle 180 ? 1 : 0 const d M 100 100 L ${x1} ${y1} A 80 80 0 ${largeArcFlag} 1 ${x2} ${y2} Z currentAngle endAngle return path d${d} fill${colors[index]} / }) return svg width200 height200${paths.join()}/svg } const data [30, 50, 20] const colors [#3498db, #e74c3c, #2ecc71] document.body.innerHTML createPieChart(data, colors)案例3折线图function createLineChart(data) { const padding 50 const width 400 const height 300 const maxValue Math.max(...data) const minValue Math.min(...data) const range maxValue - minValue || 1 const points data.map((value, index) { const x padding (index / (data.length - 1)) * (width - 2 * padding) const y height - padding - ((value - minValue) / range) * (height - 2 * padding) return ${x},${y} }) const pathD M ${points.join( L )} return svg width${width} height${height} line x1${padding} y1${padding} x2${padding} y2${height - padding} strokeblack / line x1${padding} y1${height - padding} x2${width - padding} y2${height - padding} strokeblack / path d${pathD} fillnone stroke#3498db stroke-width2 / ${points.map(point { const [x, y] point.split(,).map(Number) return circle cx${x} cy${y} r4 fill#3498db / }).join()} /svg } const data [10, 20, 15, 25, 30, 22, 35] document.body.innerHTML createLineChart(data)SVG与CSS结合使用CSS样式svg .bar { fill: #3498db; transition: fill 0.3s ease; } svg .bar:hover { fill: #2980b9; } svg text { font-family: Arial, sans-serif; font-size: 12px; fill: #333; }svg width400 height300 rect classbar x50 y200 width50 height80 / rect classbar x120 y150 width50 height130 / text x60 y295Jan/text text x130 y295Feb/text /svgSVG的可访问性添加ARIA属性svg roleimg aria-labelSales chart showing monthly revenue titleSales Chart/title descA bar chart showing monthly sales data from January to December/desc rect aria-labelJanuary sales: $1000 / /svg使用title和desc元素svg titleMonthly Sales/title descThis chart displays sales data for the past year/desc /svg性能优化1. 使用defs和usesvg defs circle iddot cx5 cy5 r5 fillblue / /defs use href#dot x10 y10 / use href#dot x30 y10 / use href#dot x50 y10 / /svg2. 简化路径function simplifyPath(path, tolerance) { // Ramer-Douglas-Peucker算法简化路径 }3. 使用CSS transformssvg .group { transform: translate(100px, 100px); }总结通过今天的学习我们深入了解了SVG数据可视化基础图形矩形、圆形、椭圆、线条、路径动画效果CSS动画和JavaScript动画实战案例柱状图、饼图、折线图CSS结合样式和交互可访问性ARIA属性和语义化标签性能优化defs复用、路径简化、transformsSVG是一种强大的数据可视化工具特别适合需要高质量、可访问的图形场景。希望今天的分享能帮助你更好地使用SVG最后给大家留个思考题SVG和Canvas各有什么优缺点在什么场景下你会选择使用SVG欢迎在评论区留言讨论
