前端SVG样式颜色等开发注意事项

SVG

Scalable Vector Graphics 可缩放的矢量图形

起源

在 2003 年一月，SVG 1.1 被确立为 W3C 标准，在过去很长一段时间，网页注重文字和图片的展示，
SVG就被遗忘了，随着网页对图形的要求越来越高，SVG又出现在人们的视野中。

关注点

可以从SVG这个名字就能瞄到我们第一个关注点在哪里，没错，就是可缩放的矢量图形，这个还是得从位图和矢量图说起，可以直白来说，位图缩放容易模糊，而矢量图一般不会，因为矢量图记录了位置信息，每次按照大小重新计算图形，而位图只能对像素粗暴的缩放，就会导致我们常见的图片模糊。

SVG不会模糊？

NONONO,由于是矢量图，是人去编写的，所以矢量图质量决定了其缩放效果，具体因素待确定

其余优点

1.支持多色图标

2.可以使用CSS实现动画，不需要再使用gif

4.本身就是DOM规范的一部分，可以像普通DOM一样修改颜色，交互性非常强

提一下权重

SVG有些属性属于DOM属性比如说fill,也可以作为CSS属性，生效的效果是一样的

<path fill="#fff" />
or
<style style="fill:#fff">

那么问题来了，涉及到样式，就必须有个权重规则，SVG能够作为CSS属性，写到DOM作为属性上的时候，权重仅比继承权重大,理解这点很重要

修改SVG颜色的前提

由于设计师都会在SVG的图形设置fill，我们在外面直接改，fill是只能被继承进去SVG，权重很低，现在有两种改变这种情况的办法：

1.删除SVG标签的fill属性，让其自然继承fill

2.设置SVG标签继承外面的fill

svg path{fill: inherit;}

两种方式区别在与是否侵入SVG源码

设置颜色

固定颜色

固定的颜色可以写死在SVG里面

动态颜色

动态双色

去除对应区域的fill，SVG内部动态色标签使用currentColor，在外面的class改变fill和color即可实现动态双色,比较简单，看下面实例

<svg id="jzm-m10" viewBox="0 0 40 40"> 
  <g> 
    <path d="M20,23c-2.2,0-4.1-1.3-5-2c0,0.8,0,6,0,6h10c0,0,0-5.6,0-6C24.1,21.7,22.2,23,20,23z" fill="currentColor"></path> 
    <g> 
      <path d="M24.5,29h-9c-1.4,0-2.5-1.1-2.5-2.5V19h-0.5c-1.4,0-2.5-1.1-2.5-2.5v-3c0-1.4,1.1-2.5,2.5-2.5h3.6
      c0.5,0,0.9,0.3,1,0.8c0.3,1.3,1.5,2.2,2.9,2.2s2.6-0.9,2.9-2.2c0.1-0.4,0.5-0.8,1-0.8h3.6c1.4,0,2.5,1.1,2.5,2.5v3
      c0,1.4-1.1,2.5-2.5,2.5H27v7.5C27,27.9,25.9,29,24.5,29z M12.5,13c-0.3,0-0.5,0.2-0.5,0.5v3c0,0.3,0.2,0.5,0.5,0.5H14
      c0.6,0,1,0.4,1,1v8.5c0,0.3,0.2,0.5,0.5,0.5h9c0.3,0,0.5-0.2,0.5-0.5V18c0-0.6,0.4-1,1-1h1.5c0.3,0,0.5-0.2,0.5-0.5v-3
      c0-0.3-0.2-0.5-0.5-0.5h-2.9c-0.8,1.8-2.6,3-4.6,3s-3.8-1.2-4.6-3H12.5z"></path>
  </g> 
  </g> 
</svg>

如上图在第一个path fill值给为currentColor,然后第二个path去除fill

默认样式
.svg  {
  fill: #77809F;
  color: #dae0f8;
}

hover样式
.svg:hover {
  fill: #fff;
  color: #5874d8
}

动态多色

动态多色的难点在于需要同时更改多个状态,不能写死，嗯？不能写死不就是需要一个变量，然后外面改变这个变量他就跟着变就可以了，CSS原生的变量，不过因为支持IE11比较弱，暂时就不会出场了，实现套路与双色一样，把变量currentColor换成CSS变量，然后通过外部CSS改变这个变量指即可实现动态双色

目前存在的问题

如果使用了SVGdefs定义的渐变色，不要让symbol display none,否则渐变色没有生效

SVG需要去除title属性，否则会出现提示

 更多关于前端SVG开发的小技巧请查看下面的相关链接

最新评论