03 | 声明式图形系统：如何用SVG图形元素绘制可视化图表？
该思维导图由 AI 生成，仅供参考
利用 SVG 绘制几何图形
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
SVG是一种基于XML语法的图像格式，对于前端工程师来说，使用SVG的门槛很低。它可以用于绘制各种几何图形，并且可以作为浏览器支持的一种图片格式独立使用。本文介绍了SVG的基本用法，包括利用SVG绘制几何图形和层次关系图。与Canvas相比，SVG的写法更类似于HTML，但在动态场景中的渲染性能相对较低。读者通过本文可以快速了解SVG的基本用法和与Canvas的不同之处。 在用户交互实现上，SVG的一个图形对应一个元素，因此像处理DOM元素一样，很容易地给SVG图形元素添加对应的鼠标事件。通过事件冒泡可以处理每个圆上的鼠标事件，实现用户交互功能。但是在绘制大量几何图形时，SVG的性能问题也需要考虑，因为节点数量多会增加DOM树渲染和重绘所需的时间。对于SVG的性能问题，可以使用虚拟DOM方案来减少重绘，但在节点数太多时，仍需依靠Canvas和WebGL来绘图。 总的来说，SVG作为一种浏览器支持的图像格式，具有简单易用、用户交互实现简单等优点，但在绘制大量图形时会面临性能问题。读者可以通过本文了解SVG的基本用法、优点和局限性，以及与Canvas的区别，从而更好地选择合适的技术方案。 在小试牛刀中，读者可以尝试使用CSS设置SVG元素的样式，以及思考SVG和Canvas分别绘制图形的不同之处。欢迎读者在留言区讨论和分享答案和思考。
《跟月影学可视化》，新⼈⾸单¥68
全部留言(18)
- 最新
- 精选
Link1. 使用 CSS 设置样式的好处：可以将样式和节点解耦，有利于样式的模块化和复用，比如多种主题色，一键换色等。 2. 先用 SVG 生成层级关系图，再用 Canvas 来完成绘制，此时 SVG 将作为一张静态图片被绘制在 Canvas 中。和单独使用 Canvas 绘图相比，这种混合方式代码量更少，代码更加可读，易维护。作者回复: 赞～说得挺好的
2020-06-27436
Geek_3469f6if(target.nodeName === 'text') target = target.parentNode; 请问，这句代码是不是有问题？找到文本节点的父节点，是group节点。设置了fill，有什么用处？作者回复: 对，看得非常仔细，这里的确是有问题，应该要设置这个节点之前的那个circle节点而不是group节点，你可以试着把github示例代码里面这块修复一下，然后提交一个pr
2020-06-2647
Frojancanvas绘制svg，和单独用svg对比，好处是可以规避svg节点过多时的性能瓶颈，但是也失去了svg方便的可交互性。和单独用canvas对比，写法就由写一堆绘制指令变成了写声明式svg加一句绘图指令，单纯绘制性能在绘制指令多且复杂的情况貌似有比较大的提升？(这个不确定svg的解析时间是不是可以忽略) ，但是交互还得使用canvas的方式实现，如果要做动画也会变得麻烦。作者回复: 对，有得就有失
2020-09-065- Geek_00734eSVG画出来的效果看着更加清晰，canvas画出来的好模糊，这是什么原因啊。尺寸都是一样的
作者回复: 因为屏幕像素密度问题，根据devicePixelRate不同要将canvas设置对大小
2021-01-1024 
Cailven关于svg，我补充一点，如今微信公众号互动图文支持使用svg制作交互和动画，但不支持js语言，因此掌握原生svg语言非常重要，并不是任何场景都可以使用js来声明和调用该系统的。作者回复: 很棒
2020-06-2824
coder做可视化组件，从性能的角度来讲，是SVG好一些，还是Canvas好一些？作者回复: 一般Canvas更好，但也不是绝对的，还需要看具体做什么。绘制图形越多，Canvas相比SVG的性能优势会越明显。
2020-07-033- Geek_07ad60还是不太理解声明式和指令式，请老师再详解一下，谢谢！
作者回复: 之所以说声明式是说svg只要声明一个元素添加到DOM树上就能绘制出来，而canvas则需要调用绘图指令，两者机制有区别。
2020-06-2923 
特异型大光头<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> </svg> <script> const svgroot = document.querySelector('svg'); const circle = document.createElementNS('http://http://www.w3.org/2000/svg', 'circle'); circle.setAttribute('cx', 100); circle.setAttribute('cy', 100); circle.setAttribute('r', 50); circle.setAttribute('fill', '#ff0000'); svgroot.appendChild(circle); </script> </body> </html> 老师为何我创建后,控制台也生成了svg,和circle,但就是页面上显示不出来...作者回复: document.createElementNS('http://http://www.w3.org/2000/svg', 'circle'); 这里写错了，应该是http://www.w3.org/2000/svg，你多写了一个http:
2020-06-2622
姚凯伦最近也遇到过用svg绘制元素太多导致渲染卡顿问题，后来改用使用一条 path 绘制所有元素，但是 path 一长也同样存在渲染卡顿问题，不知道老师有没有遇到过类似的问题作者回复: 是的，path长导致图形绘制得太复杂也会有问题，具体要看你的数据量，如果达到瓶颈，不太好彻底解决，只能换成canvas2d或者webgl。在后续课程性能篇中会有详细的介绍。
2020-06-262
段亚东这两个案例，为什么不直接用div css画呢？作者回复: 这节课讲svg呀
2020-12-09