前端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开发的小技巧请查看下面的相关链接

赞 (0)

相关推荐

  • JS页面动态绘图工具SVG，Canvas，VML介简介

    说到绘图.报表之类的技术,大家首先想到的就是Flex,当然也有许多了解javaapplet,对于这两种技术来说,各有利弊. 首先Flex很笨重,但是其效果实在让人喜欢.对于javaapplet来说,至少我在网络上很少看到,当然对于我们做开发的来说在我们的开发工具或者内部网络上还是有一些的. 其实现在Web上进行绘图的话还是有很多选择的,你可以到谷歌上搜索JS绘图,会有很多绘图工具提供给你使用,而且功能非常强大.比如说maxGraph,你可以到http://www.jgraph.com/mxgra

  • vue动态渲染svg、添加点击事件的实现

    业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签 经多次实验,用embed.img等标签改变src属性的方式,均无法实现上述全部功能(尤其是svg内部点击事件),最终采用Vue.extend()方法完整实现,代码也较为简洁,html结构如下: <template> <div> <div id="svgTemplate"></div> </div>

  • vue项目中使用Svg的方法

    github demo: github地址 闲聊背景 本文主要以 vue-cli3 搭建的项目为例,来聊一下如何在项目中更优雅的使用 svg . 众所周知, vue-cli3 已经推出很长一段时间了,大家可以感受一下 vue-cli3 带来的零配置体验.But,也相应带来了一些弊端,就是如归需要修改默认的 loader 时,会比较麻烦. 们接下来主要使用的就是上文中提到的 svg 的 use ,先上一张 vue-cli3 搭建的项目的目录,可以看到根目录下只保留了 public/ 以及 src/

  • JavaScript基于SVG的图片切换效果实例代码

    JavaScript基于SVG的图片切换效果实例代码

    最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解到没. -_-!!! 图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下. 效果要求 点击控制块,图片切换.切换的时候使用圆形做遮罩,由小到大变化.每次切换的时候,圆的位置随机产生. 主要知识点 1. SVG 的裁切(遮罩),clip-path 的运用. 2. SVG 利用 JS 更改层

  • 公众号SVG动画交互实战代码

    越来越多的公众号在图文消息中加入了SVG动画交互效果,SVG支持事件触发动画,相对于单独做一个H5而言,由于公众号消息依托于微信服务器,为广告主节约了服务器流量成本.这次我们以苹果公众号的一篇交互消息为例,剖析下里面的效果是怎样实现的. 苹果公众号SVG交互 动画主要分为两屏,第一屏出现闪动文字提示用户点击交互,用户点击后第一屏动画消失接着播放第二屏的gif动画,最后画面停止在产品图片帧上. 1.首先构建第一屏动画: 1.1 SVG的基本结构 <svg viewBox="0 0 1080

  • 微信小程序里使用SVG矢量图标方法详解

    微信小程序里使用SVG矢量图标方法详解

    在微信小程序开发过程中需要在小程序里使用SVG矢量图标,至于为什么要使用SVG图标相信看到这篇文章的你应该明白,如果你不明白请百度一下 微信小程序里使用SVG矢量图标有2种引入方法: 一.SVG图标转换为BASE64编码 使用 http://tools.jb51.net/transcoding/img2base64 工具把需要引入的SVG图标转换成BASE64编码 注意:生成BASE64编码时需要把开头的 data:image/svg; 修改成 data:image/svg+xml; 这个在线工

  • php 实现svg转化png格式的方法分析

    php 实现svg转化png格式的方法分析

    本文实例讲述了php 实现svg转化png格式的方法.分享给大家供大家参考,具体如下: svg转png实现 1.php imagick扩展插件 a.研究imagick插件方法 $im = new Imagick($upload_path . $file_name); $svg = file_get_contents($upload_path . $file_name); $svg = '<?xml version="1.0" encoding="UTF-8"

  • JavaScript 下载svg图片为png格式

    1.遇到需要将svg下载的需求,网上找了一些代码,地址是这个https://github.com/exupero/saveSvgAsPng,但是不太好用,莫名的把网页所有的svg都下载了,于是在源码的基础上做了一些小的修改:代码如下所示 var doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

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

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

    SVG Scalable Vector Graphics 可缩放的矢量图形 起源 在 2003 年一月,SVG 1.1 被确立为 W3C 标准,在过去很长一段时间,网页注重文字和图片的展示,SVG就被遗忘了,随着网页对图形的要求越来越高,SVG又出现在人们的视野中. 关注点 可以从SVG这个名字就能瞄到我们第一个关注点在哪里,没错,就是可缩放的矢量图形,这个还是得从位图和矢量图说起,可以直白来说,位图缩放容易模糊,而矢量图一般不会,因为矢量图记录了位置信息,每次按照大小重新计算图形,而位图只能对

  • 微信小程序页面开发注意事项整理

    小程序的开发注意事项: 1.js文件 每个页面对应的js文件可以定义页面onReady,onLoad,onShow,onHide,onUnload,还有页面的数据,自定义的函数要写到一块,内部约定是都写到默认函数的后面.既"页面中先data,再默认函数,再自定义函数"方便review code,提高协作效率. 2.json文件 默认不能为空,即使没有内容也要为空数据{},原先定义在app.json中的内容,如果需要在当前页面中重新定义,那么只要把内容复制过来,直接赋新值即可,用于设置小

  • oralce和db2兼容开发注意事项

    数据库兼容,在开发项目过程中,难免会遇到 更改数据库,或者后期 项目升级,也可能会遇到这种情况,这里就说明下oralce和db2兼容开发注意事项. 兼容oralce.db2开发注意事项(前提是db2版本是9.7,且是开启PLSQL编译选项之后创建的数据库):  1. 在like 之后若使用了表字段,应统一改成使用locate函数 如:   oralce写法:    select * from fw_right a where '03' like a.rightid||'%';   兼容写法:  

  • 60条Android开发注意事项与经验总结

    1. 全部Activity可继承自BaseActivity,便于统一风格与处理公共事件,构建对话框统一构建器的建立,万一需要整体变动,一处修改到处有效. 2.数据库表段字段常量和SQL逻辑分离,更清晰,建议使用Lite系列框架LiteOrm库,超级清晰且重心可以放在业务上不用关心数据库细节. 3. 全局变量放全局类中,模块私有放自己的管理类中,让常量清晰且集中. 4. 不要相信庞大的管理类的东西会带来什么好处,可能是一场灾难,而要时刻注意单一职责原则,一个类专心做好一件事情更为清晰. 5. 如果

  • PHP开发注意事项总结

    1.使用内嵌的HTML代码,而不是PHP的echo语句. 因为PHP是一门嵌入式Web编程语言,可以将HTML代码和PHP代码相互嵌入.但是很多程序员担心在HTML代码中过多的使用""嵌入PHP代码会多次调用PHP解释器,从而降低了PHP代码的运行速度,所以宁愿使用PHP的echo语句来输出HTML代码,而不直接使用HTML代码.但事实却恰恰相反.每一个PHP页面只调用一次PHP解释器来解释所有的PHP代码,所以,只在需要时才嵌入PHP代码,而大多数的时候直接使用HTML代码输入结果,

  • angularJS开发注意事项

    作为一个coder,应该具有经常总结反思的习惯,如果不能及时总结,可能就会忘记自己踩过的很多坑,然后会导致同一个坑踩很多次,所以我打算把这些都记录下来,以方便是对自己的重复记忆,避免无效的coding,另一方面可以希望可以给遇到相似问题的同僚们一些收获. 1.手动触发脏检查 在开发过程中,我们可能经常会通过js来手动更改绑定的相关数据,而不是通过dom操作来改变绑定的相关数据,这样也很多情况下会导致绑定数据的视图不能够及时更新,这个时候就需要我们手动触发一下脏检查,下面我就介绍一下三种手动触发脏

  • Vue之前端体系与前后端分离详解

    Vue之前端体系与前后端分离详解

    目录 概述 前端知识体系 前端三要素 表现层(CSS) 行为层(JavaScript) JavaScript 框架 UI框架 JavaScript 构建工具 三端统一 混合开发(Hybrid App) 微信小程序 后端技术 主流前端框架 ElementUl ICE VantUl AtUl CubeUl 前端发展史 基于AJAX带来的SPA时代 此处的 MV* 模式如下: NodeJS带来的全栈时代 总结 概述 ​ Vue(读音/viu/,类似于 view)是一套用于构建用户界面的渐进式框架,发布

  • 使用微信小程序开发前端【快速入门】

    使用微信小程序开发前端【快速入门】

    前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好

  • 前端使用svg图片改色实现示例

    目录 引言 svg填充色用的fill css改色利用过滤器filter 最后顺便介绍下filter: drop-shadow() 引言 周六来公司写点东西,刚好有个icon颜色不对,ui又不在公司,那么就只能自己动手丰衣足食了. 呜呜呜,好想住公司,都不用上下班了. svg填充色用的fill 当ui给你了svg图片,且是单色的,又只有你用 svg填充色用的fill,修改里面的颜色即可. 下面是例子: 首先,ui一般会直接给你svg图片,比如这样的: ,用idea或者笔记本打开里面是这样的: <?

  • 适合前端Vue开发童鞋的跨平台Weex的使用详解

    基于 Vue 技术栈的你如果需要选用一种移动端跨平台框架,是 Weex?React-Native?还是Flutter? 无疑,相对于后两者,因为你现在已有比较熟练的 Vue 基础,如果在其他条件一致的情况,Weex 无疑是最佳选择:但是 Weex 真的适合在实际项目中进行移动端跨平台开发吗?Weex 的开发效率.Weex 的质量是否满足需求? 一.开发环境 在这个 Weex app 开发中,我的开发环境相关配置如下: 工具名称 版本号 Node.js 8.2.1 Npm 5.3.0 Androi

随机推荐