html中如何设置图片填充颜色渐变,实现SVG图标的渐变填充效果
2016年我写过一篇文章如何使用SVG图标,其“试验性部分”的结语是个警告 - “抱歉,渐变填充无法工作”。
我指的是像fill: linear-gradient(red, blue)一样的无效代码,因为fill属性出自SVG - 该元素内置了独有的渐变支持;而linear-gradient则源自CSS,常用于设置背景。二者的结合效果并不理想。
我可以使用SVG的元素,但之前并未尝试过。几个月后我做了试验,效果还算不错。下面请看分享。
在HTML中添加渐变
我发现最值得信赖的方式是在HTML页面中添加SVG元素(例如在
标签的开始或结束位置添加)。这里应该定义一个。
`
这个元素不推荐用display:none实现隐藏效果,这样的话某些浏览器会忽略渐变效果。把元素高度设为0px来实现隐藏效果是可行的。
现在我们可以在SVG图标上使用渐变效果了:
或者在CSS里这样写:.icon { /* gradient and fallback color */
fill: url(#my-cool-gradient) #447799;
}
不过我们无法定制单个按钮的渐变。如果想这样做,需要在HTML中创建不同的SVG渐变定义。
使用CSS变量控制渐变色
如果我们想用CSS设置渐变色,可以通过CSS变量来实现。我们将使用CSS自定义属性来编写渐变定义(var(--my-custom-property)).
现在我们可以设置 - 如果需要的话 - 在CSS中还能改变这些颜色:#gradient-horizontal {
--color-stop-1: #a770ef;
--color-stop-2: #cf8bf3;
--color-stop-3: #fdb99b;}#gradient-vertical {
--color-stop-1: #00c3ff;
--color-stop-2: #77e190;
--color-stop-3: #ffff1c;}
最后,用这些效果来填充图标:.icon-hgradient { fill: url(#gradient-horizontal) gray; /* We could use it as a stroke fill too:
stroke: url(#gradient-horizontal) gray; */}.icon-vgradient { fill: url(#gradient-vertical) gray;
}
使用SVG渐变填充和CSS变量测试图标:
渐变填充会绘制图标的每条路径。为了避免颜色衔接不当(譬如叶子和茎的连接处),把图标的源SVG所有路径或大部分路径合并可能有效果。
在外部文件中使用渐变
这个技巧在FireFox中被证实有效,也曾适用于Edge(Edge14,15确认可用,但Edge16和预览版又取消了支持)。请看下面的测试:两个图标都取自一个外部雪碧图: sprite.svg.
第一个图标使用了HTML页面的渐变效果,第二个则使用了sprite.svg..icon-sprite-gradient { fill: url(sprite.svg#my-warm-gradient) red;
}
不支持此项操作的浏览器(Chrome,Safari,最新版Edge...)应该为第二个图标展示一个红色的替代填充效果。
在CSS中使用数据URL作为渐变值
如果我告诉你可以在SVG中定义渐变之后把SVG作为数据URL放在CSS中,你会怎么想? 好吧我承认是在犯傻,可它真的可以实现! 至少在Firefox中可以:P/* Notice the id="grad" in the SVG URL and how we’re using it at the end. Note that the # in hexadecimal colors must be escaped as %23. */.icon-gradient-url { fill: url("data:image/svg+xml,#grad") purple;
}/* Same SVG, in base64 */.icon-gradient-base64 { fill: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxsaW5lYXJHcmFkaWVudCBpZD0nZ3JhZCc+PHN0b3Agb2Zmc2V0PScwJScgc3RvcC1jb2xvcj0nI2ZmMDBjYycvPjxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1jb2xvcj0nIzMzMzM5OScvPjwvbGluZWFyR3JhZGllbnQ+PC9zdmc+#grad") purple;
}
看到我们如何在URL的结尾用#grad引用渐变效果的id了吗?目前看来只有Firefox能理解这个语法。额,太遗憾了不是吗。
这个例子打算实现一个品红色-紫色渐变效果。不支持此操作的浏览器(Chrome,Safari,Edge...)应该会展示一个紫色的备用填充效果。
概括是的,我们可以使用渐变填充!
但首先需要在HTML中添加SVG渐变
可以在SVG渐变中直接设置颜色(当然是HTML中的SVG),或者在CSS里设置(使用CSS变量)
所有使用给定渐变效果的图标会使用相同的颜色,但我们无法像下面一样覆盖某种特定颜色:.icon-gradient-override { /* 可行方法 */
fill: url(#gradient-horizontal) gray;
/* 以下方法法不可行... */
--color-stop-1: white;
--color-stop-2: gray;
--color-stop-3: black;}
假如你需要大量渐变效果,这个技巧可能不适合你。因为在HTML中创建10个或20个不同的SVG渐变并不实用。但对于简单需求而言,这个技巧在所有现代浏览器中均可使用(如果我们放弃CSS变量的话,IE11也在支持的浏览器之列)。
html中如何设置图片填充颜色渐变,实现SVG图标的渐变填充效果相关推荐
- CorelDRAW中如何设置调和对象颜色渐变
通过调整调和对象属性,可以更改调和效果的外观.调和对象属性包括调和对象之间的数量和间距.调和对象颜色渐变.调和映射到的节点.调和的路径以及起始对象和结束对象.本教程将详解CorelDRAW中如何设置调 ...
- 怎么在ppt上设置文字滑动的效果html,PPT 中如何设置图片滚动切换效果
我们经常在工作中使用PPT办公软件,在网页上也经常看到一组图片水平滚动或者垂直滚动的效果,你知道PPT 中如何设置图片滚动切换效果吗?今天小编就教一下大家使用PPT 中如何设置图片滚动切换效果. 首先 ...
- Android中如何设置RadioButton在文字的右边,图标在左边
本文转自94cool博客园博客,原文链接:http://www.cnblogs.com/94cool/p/5411953.html,如需转载请自行联系原作者Android中如何设置RadioButto ...
- ImageView中动态设置图片
关于ImageView中如何动态设置图片 我是从一个list中读取的字符串 动态的设置到ImageView中. mTreeList中存放的是R.drawable.icon_direct_bottom ...
- html中怎么设置图片平铺,css怎么把图片平铺?
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面. 下面我们来看一下使用css设置图片 ...
- jquery中解决设置图片不显示
jquery中解决设置背景图片无法显示 let src='clock/img/afternoon.png'; them_icons.css('background','url('+src+')') 主 ...
- 多媒体:图片PNG、IconFont、SVG图标资源优化详解
1 背景 最近因为一些个人私事导致好久没写博客了,多事之年总算要过去了,突然没了动力,所以赶紧先拿个最近项目中重构的一个小知识点充下数,老题重谈. 在我们App开发中大家可能都会有过如下痛疾(程序员和 ...
- bootstrap 点击图片放大查看_Bootstrap 开源 SVG 图标库 Bootstrap Icons
(给程序员的那些事加星标) 转自:开源中国 Bootstrap 开源了首套 SVG 图标库 Bootstrap Icons,其团队表示这是有史以来第一次拥有自己的图标库,此图标库起初专门针对其从表单控 ...
- 在html中如何设置图片轮显,css中怎么让图片轮播?
css中让图片轮播的方法:将多个大小相同的图片横排放在一个图片中,然后在图片容器外加一个展示容器,并为图片容器添加自定义动画,在动画不同阶段设置递增的偏移值即可实现图片轮播. css让图片轮播实现思想 ...
最新文章
- 人工智能技术在抗击新冠肺炎疫情中大显身手
- python软件界面-用Html来写Python桌面软件的UI界面-htmlPy
- HTML框架标签的使用-lt;framesetgt;
- js动态增加,删除td,tr,table,div
- 分屏总屏计算机电缆,分屏加总屏电缆DJYVP计算机电缆14x2x0.75
- C语言中的类模拟(C++编程思想)
- oracle出现数据坏块ORA-01578 ORA-01110 ORA-26040解决办法。
- 利用navicat 进行 mysql建表语句转oracle建表语句
- 浏览器安装Axure插件与配置
- 处理器管理及并发进程-多道程序设计
- 虚拟化是什么,虚拟化技术分类
- MPQ文件结构和Partial MPQ文件结构
- python替换所有标点符号_python 把标点符号替换为空
- 计算机怎么搜索隐藏的网络,电脑如何连接隐藏wifi 笔记本电脑如何添加隐藏wifi?-192路由网...
- 2021年前端会有什么新变化?
- Android PPP协议
- 流行音乐即兴伴奏——常用和弦
- 老大难的GC原理及调优,这下全说清楚了
- 国标28181:接收设备注册
- 笔记本损耗60 计算机提示,笔记本买了一年 电池损耗已经60%了 怎么处理啊
热门文章
- 无向图的深度优先遍历非递归_【数据结构图(一)】什么是图
- ts自动编译声明文件_拥抱 TS:细数选择 TS 的 N 种理由
- while嵌套注意事项(九九星号代码
- angular 权限 php,PHP,Angular,HTACCESS-仅允许来自源域的请求
- Coding Party 邀你出战!飞桨黑客马拉松线下场来啦
- 技术动态 | 北京大学计算机所邹磊教授研究组开源面向 RDF 知识图谱的自然语言问答系统 gAnswer...
- 论文浅尝 | Complex Embeddings for Simple Link Prediction
- 2 计算机网络性能指标
- 8万行的insert数据,Ctrl+c、Ctrl+v后心态崩了(如何在Linux下对MySQL数据库执行sql文件)...
- SQL Server创建Job, 实现执行相同脚本而产生不同作业计划的探究