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" 表示这个区域不属于该元素,所以导致这个区域的鼠标动作并非作用在该元素上。