亲宝软件园·资讯

展开

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

人气:0

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

nlZCad.png

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

nlZesS.png

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

nlZ6sO.png

动态多色

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

目前存在的问题

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

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

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

加载全部内容

相关教程
猜你喜欢
用户评论