使用 svg（Scalable Vector Graphics）绘制前端图表的注意事项以及小技巧

1. 图形的边框（即stroke）： 一半在图形内部，一半在图形外部，当 stroke-width 很宽时，在设置 图形坐标时需要注意这点。

 

2. IRI （Internationalized Resource Identifier， 比 uri 更通用的一种资源标记方法） 和 FuncIRI 的区别：

svg 里面会看到两种 标记资源的方法： some_iri , url(some_iri)

FuncIRI 就是把 一个 iri 用 url( ) 括起来，其作用就是明确告知使用者 括号里面的内容是一个 iri 。之所以有这种需求，是因为 某些属性既可以接受一个iri 又可以接受一个 一般的字符串， 所以需要有一种特定的格式来区分这两种情况。 （比如 fill 属性 可以 直接填写颜色，也可以引用一个 梯度 元素）

所以， 对于那些只能接受 iri的属性 （例如 ‘xlink:href’）， 就不能使用 FuncIRI 。

实际使用的时候，iri 一般就是一个元素的id , 形式是 #id , 但是有的时候（比如设置了base），需要在 id 前面加上 location.href ， iri的形式就是 location.href#id 。

 

3. svg插入html内容，可以使用 foreignObject 元素。

实际上是通过foreignObject 插入 xhtml的内容，因为 foreignObject 是用于插入其他的 xml内容的， xhtml是在 html4基础上改造的兼容xml格式的html标准。

 

4. svg中的角度，顺时针为正。

例如，transform属性中 rotate(90) , 表示顺时针旋转90度。

在绘制椭圆型的弧线时，设置 sweep-flag 时也要根据角度的变化来设置。

 

5. fill="none"会导致该区域无法捕捉鼠标事件（比如点击）

对一个封闭区域设置 fill属性时，fill="none" 和 fill="white" (假定背景色就是白色) 虽然从视觉上没有任何区别，但是对交互是有影响的。fill="none" 表示这个区域不属于该元素，所以导致这个区域的鼠标动作并非作用在该元素上。