标签：需求 不能 椭圆 前端 indent href 注意事项 color 页面
1. 图形的边框（即stroke）： 一半在图形内部，一半在图形外部，当 stroke-width 很宽时，在设置 图形坐标时需要注意这点。
2. IRI （Internationalized Resource Identifier， 比 uri 更通用的一种资源标记方法） 和 FuncIRI 的区别：
svg 里面会看到两种 标记资源的方法： some_iri , url(some_iri)
FuncIRI 就是把 一个 iri 用 url( ) 括起来，其作用就是明确告知使用者 括号里面的内容是一个 iri 。之所以有这种需求，是因为 某些属性既可以接受一个iri 又可以接受一个 一般的字符串， 所以需要有一种特定的格式来区分这两种情况。 （比如 fill 属性 可以 直接填写颜色，也可以引用一个 梯度 元素）
另外两点区别：
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" 表示这个区域不属于该元素，所以导致这个区域的鼠标动作并非作用在该元素上。
使用 svg（Scalable Vector Graphics）绘制前端图表的注意事项以及小技巧
标签：需求 不能 椭圆 前端 indent href 注意事项 color 页面
原文地址：http://www.cnblogs.com/a-distant-bright-star/p/6964426.html
