简单使用SVG
在前端的工作过程中经常会使用一些图标。在之前我们曾用过两种方式:图片,纯CSS,iconfont。
使用图片是一种简单的方式,然而却有样式不好调整,资源较大的缺点。
纯CSS只能实现较简单的图形,多用before、after实现,优点是体积小,缺点是每次使用都是手写,调整太浪费时间。
iconfont是阿里的一个图标库,是一个比较好的方式,把图标当作字体,方便调整,然而项目管理却要付出一定时间,新增图标又需要重新导入。
最近刚好看到svg,发现svg也是一种相当方便的方式。首先svg是代码的方式,体积小,再次写起来不像纯CSS那么难。
在这里先记录下一个简单箭头的写法,以后在使用中继续完善。
1. svg标签
属性version
和属性baseProfile
属性是必不可少的,供其它类型的验证方式确定SVG版本。- 作为XML的一种方言,SVG必须正确的绑定命名空间 (在xmlns属性中绑定)。
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> </svg>
2. 插入折线
Polyline是一组连接在一起的直线。因为它可以有很多的点,折线的的所有点位置都放在一个points属性中。
points点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。
每个点必须包含2个数字,一个是x坐标,一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样:“0 0, 1 1, 2 2”。
<svg version="1.1" baseProfile="full" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <polyline points=" 0 0 8 8 16 16 "></polyline> </svg>
3. 设置线条
stroke线条颜色,stroke-width线条宽度,stroke-linecap线条端点样式,stroke-linejoin线条结点样式,fill填充样式
svg{ stroke: #000; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; fill: none; margin-left: .04rem; }
4. 插入到html,可以当作正常标签使用