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属性,否则会出现提示
d
SVG开发注意事项的更多相关文章
- delphi 串口 关于RS485总线通信协议开发注意事项
http://blog.csdn.net/shjhuang/article/details/9426739 关于RS485总线通信协议开发注意事项 1 前言 近段时间发现我们系统在进行设备 ...
- win7虚拟打印驱动开发注意事项
win7虚拟打印驱动开发注意事项 通过控制面板安装遇到以下问题:错误1.提示“Printer driver was not installed. Operation could not be comp ...
- MUI开发注意事项
mui开发注意事项,有需要的朋友可以参考下. mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细的 ...
- Unity3D开发注意事项
最近给组里定Unity开发注意事项,参考了@陆泽西在群里分享的[前端开发规范],结合自己工作中的经验,整理一下,下面不少条款都是我们要求在开发中必须遵守的. 资源: 图片统一为png格式,纹理属性:T ...
- 跨平台移动APP开发进阶(一)mui开发注意事项
mui开发注意事项 Mui HTML5开发框架 mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验:这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文:想了解mui更详细 ...
- 移动端开发注意事项——meta、rem以及弹性盒
移动端开发注意事项——meta.rem以及弹性盒 随着人们对移动端的依赖程度的增强,前端开发对移动端的需求也越来越强烈.那么,在移动端开发中,有哪些事项是需要注意的呢? meta标签 在常规的pc端开 ...
- Android Library开发注意事项
Android Library开发注意事项 App Module添加依赖Android Library时可以设置library的优先级, 在编译时,app按照library从低到高的优先级依次与每个l ...
- Cobalt环境搭建及 Web开发注意事项
一.在Linux系统上搭建Cobalt运行环境 Cobalt是一款开源轻量级HTML5/CSS/JS浏览器,旨在于用最少的CPU.GPU.RAM等资源消耗提供丰富的应用程序开发.为了使前端开发者验证自 ...
- 【VS开发】ActiveX开发注意事项
[VS开发]ActiveX开发注意事项 标签:[VS开发] 注意:必须在工程的app文件的InitInstance()中加入如下代码,否则动态创建控件不会成功: AfxEnableControlCon ...
随机推荐
- WPF 精修篇 数据绑定到对象
原文:WPF 精修篇 数据绑定到对象 数据绑定到对象 首先 我们需要一个对象 public class Preson { private string name; public string Name ...
- Linux下修改Mysql密码的三种方式
前言 有时我们会忘记Mysql的密码,或者想改一个密码,以下将对这两种情况修改密码的三种解决方法做个总结 本文都以用户为 root 为例 一.拥有原来的myql的root的密码 方法一: 在mysql ...
- Django中的跨域请求问题
本文目录 一 同源策略 二 CORS(跨域资源共享)简介 三 CORS基本流程 四 CORS两种请求详解 五 Django项目中支持CORS 回到目录 一 同源策略 同源策略(Same origin ...
- 关于js里的那一堆事件
分类 事件名 触发描述 一般事件 onclick 鼠标点击事件 ondbclick 鼠标双击事件 onmousedown/up 鼠标按下/松开事件 onmouseover/move/out 鼠标悬浮/ ...
- Jmeter之用于json格式的响应断言
当响应结果是json格式时,用JSON Assertion更方便判断. 1 在请求上右键添加json断言 2 编辑json Assertion 判断方式: 如果响应结果不是json格式的,fail ...
- Android studio down 的项目中文出现 乱码
发现down的项目file->open找到文件夹打开,里面少很多东西,像build.grade(好像拼错了). 这个问题是要file->import progect找到文件夹打开,as会自 ...
- CSS3 2D变形 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)
transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 变形转换 ...
- Element-ui中为上传组件添加表单校验
vue所依赖的Element的UI库在使用其中的upload组件时,可能很大几率会遇到这个题,需要给upload组件添加表单校验 大家这里直接看代码就可以 <el-form-item class ...
- [b0003] 总览:Hadoop 个人学习路线进展
3. Spark 搭建 过 1.1 搭建伪分布式2.0.1 ok 2016-10-23 耗时 2h ref [0006] Spark 2.0.1 伪分布式搭建练手 后续: 1.2 分布 ...
- Spring Boot2.1.7启动zipkin-server报错:Error creating bean with name 'armeriaServer' defined in class path
修改项目,更新组件版本时,引入了最新版本2.12.9的zipkin-server和zipkin-autoconfigure-ui时,服务启动报错: org.springframework.beans. ...