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

Posted 2020-09-22

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 。

另外两点区别：

1. 使用 IRI的时候，只能包含 id, 而使用 FuncIRI 时， url()中的内容可能需要加上 location.href 以构成完整的 url （取决于页面的base设置）

2. 使用 IRI 时， id 中不能有 连字符（-） ， 使用 FuncIRI 时 ， 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" 表示这个区域不属于该元素，所以导致这个区域的鼠标动作并非作用在该元素上。