使用 svg(Scalable Vector Graphics)绘制前端图表的注意事项以及小技巧
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 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 。
另外两点区别:
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)绘制前端图表的注意事项以及小技巧的主要内容,如果未能解决你的问题,请参考以下文章
Android 安装包优化Android 中使用 SVG 图片 ( 批量转换 SVG 格式图片为 Vector Asset 矢量图资源 )
Android 安装包优化Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )
Android 安装包优化Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )