背景最近一直在做报表等需求，用highcharts比较多。highcharts使用svg作图，所以学习了svg，稍微记录一下。概述svg是XML语言的一种形式。SVG可以通过定义必要的线条和形状来创建图形，修改现有的位图，或者结合这两种方法来创建图形。图形及其组件可以通过过滤器进行变形、合成和完全改变外观。简单来说可能不准确，“就是可以画出来的html”。使用坐标svg的坐标系与html相同，元素的左上角为(0,0)坐标。根元素首先声明一个根元素svg。svg元素上的属性是必不可少的。1、version和baseProfile确定svgversion2，width，height指定svg的宽高3，xmlns指定命名空间。绘制图形//在(10,10)坐标处，绘制一个矩形，宽度为30，轮廓宽度为5（黑色），填充为白色//画一个圆，半径为80，圆心位置为(150,100)，agreenfill//连接两点(10,50)和(110,150)的线//画一个椭圆。center:(75,75),longradius:20,shortradius:5//绘制折线，points为一个点在折线上。etc...g元素g元素是对象分组的容器。添加到g元素的转换应用于其所有子元素。添加到g元素的属性由其所有子元素继承。另外，g元素也可以用来定义复杂的对象，然后可以通过use元素来引用。使用SVG中的元素使用元素获取文档中的目标节点并将它们复制到其他地方。use元素相当于html中的模板。黑色红色blue在svg中使用CSS在svg中可以使用css来控制样式，这和html没什么区别。然而，并不是所有的属性都可以用css来设置。比如宽度、高度等不能用css设置，必须写在svg元素上，如那么属性可以通过css设置吗？可以使用css设置：https://www.w3.org/TR/SVG/pro...不能使用css设置：https://www.w3.org/TR/SVG/att...insvg，也可以像html一样使用class，例如：12:48.test{font-size:12px;颜色：#333333；fill:#333333;}在svg中使用CSS需要注意的事项注意svg中的css和html中的css还是有区别的。最重要且最容易出错的是transform属性。之前坑的很深。已经有文章详细介绍过，这里就不一一解释了。文章地址：https://www.zhangxinxu.com/wo...https://css-tricks.com/transf...在svg中使用DOM操作在svg中使用DOM操作和在html中一样。例如：constrect=document.querySelector('rect');rect.getAttribute('x');rect.setAttribute('x','100');rect.addEventListener('click',_=>{console.log(1)});...就把svg当作html来进行DOM操作，没问题.svg和canvas的对比，在功能上是一样的，都是在h5页面上绘制图片。但两者之间仍然存在显着差异。svg是用xml来描述图形，而canvas是用js来绘制图形。在这方面，svg更简单。svg支持事件处理程序，canvas不支持事件处理程序。svg是基于矢量的，可以很好地处理图像大小的变化。画布基于位图，无法更改大小。canvas提供的功能比较原始，适用于像素处理、动态渲染和大数据量绘制。当元素过多时，canvas的性能更好。毕竟一个svg超过10000个dom元素对于浏览器来说肯定吃不消。等等……结论是最近接触了svg，所以稍微研究了一下。前端可视化是一个挑战，也是一个很有意思的方向，值得深入研究。
