两种做法都能够加 svg 规范的动画特技，但第二种，inline svg 和它内部的元素能够与 CSS/JS 交互。

  还有一种不常见的做法，是解析 svg 语法，生成对应的 2d canvas 操作。（canvg）

  在狭窄的大屏可视化项目中，常常会用到各式各样的图表。与传统的表格展现、单调的文字论述比较，图表展现则运用户看起来愈加直观、数据的展现则愈加一望而知。本文依据svg绘图技能结合前端技能栈vue，以工作中常用的环形进展条为例，简略论述一下制作进展条的一些思路，希望能和狭窄共勉。

  思路解说：制作圆环，选型技能有多样，比方能够运用canvas制作、运用div模仿，运用echarts插件等等，这儿以svg技能为例。说起制作圆环，狭窄能够运用svg中的circle标签，当然也能够运用path标签，一个圆环作为布景，另一个圆环作为进展环。这儿就有一个疑问，已然都是圆，怎样依据实践的数值制作对应的弧度呢？这儿就需求用到一个高档的css特点，stroke-dashoffset-详细用法能够检查相关api文档。在大多数的事务场景中，环形进展条总是奇形怪状，例如有的环形进展条像是带有刻度的，一段一段的，这就需求用到另一个高档css特点了，stroke-dasharray。运用stroke-dashoffset和stroke-dasharray，结合svg中的突变和旋转等知识点，狭窄能够制作出各式各样的进展条，如下图：

  到这儿，狭窄封装了进展条的根本特点及一些必传的参数，狭窄就能够在在相应的组件中运用这个进展条组件了，经过装备不同的款式，就能够完结各式各样的小事例了