简单使用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，可以当作正常标签使用

 

转载于:https://www.cnblogs.com/diyichen/p/11354399.html