动态修改svg的颜色,svg做背景色时候修改颜色
svg修改背景色可以使用fill属性来修改,但是我现在需要动态改变svg的颜色,例如我hover的时候
现在发现一种兼容性还不错的方法是css属性mask 类似于给路径填充上颜色,结合background就可以动态修改SVG的颜色,这时就行两幅图片一样的效果
上代码
.tree_wrap,.flat_wrap{
width: 16px;
height: 16px;
margin-right: 16px;
background-color: #768893; // 这个色是会填充到路径上的颜色
}
.tree_wrap:hover,.flat_wrap:hover{
cursor: pointer;
background-color: #4598F0;
}
.tree_wrap{
mask: url('~static/dir/icon_tree.svg') no-repeat center center; //类似一个到路径上做一个遮罩, 用法和background属性一样
}
.flat_wrap{
mask: url('~static/dir/icon_flat.svg') no-repeat center center;
}
动态修改svg的颜色,svg做背景色时候修改颜色的更多相关文章
- QTextEdit中选中文本修改字体与颜色,全部文本修改字体与颜色(设置调色板的前景色、背景色、文字颜色以及基色)
----我的生活,我的点点滴滴!! 当然以下内容都可以通过设置样式来达到目的,但是下面不使用这样的方法 先来看张图,理解此图基本就能实现上面所要达到的目的了 Widget::Widget(QWidge ...
- [Eclipse] 详细设置护眼背景色和字体颜色并导出
http://jingyan.baidu.com/article/d5a880eb6c4f7813f147ccef.html Eclipse是一款码农们喜闻乐见的集成开发平台,但是其默认的主题和惨白的 ...
- Eclipse详细设置护眼背景色和字体颜色并导出
Eclipse详细设置护眼背景色和字体颜色并导出 Eclipse是一款码农们喜闻乐见的集成开发平台,但是其默认的主题和惨白的背景色实在是太刺激眼球了.下面,将给大家详细介绍如何设置成护眼主题的方法,也 ...
- SVG vs Image, SVG vs Iconfont
这可能是个别人写过很多次的话题,但貌似由于兼容性的原因?图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式?希望通过自己新瓶装旧酒的方式能重新引导一下问题. SVG vs Ima ...
- linux 的终端字体色和背景色的修改方法(三)
除了在窗口下修改,配置文件中修改外,还可以用shell来修改,此处为B shell linux BASH shell下设置字体及背景颜色 类型:转载 这篇文章主要介绍了linux BASH shell ...
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- MFC中修改静态文本框中文字的字体、颜色
假设有一个静态文本框控件,其ID为:IDC_STATIC_XSDJ,且关联一个control类的CStatic类型的变量m_static_xsdj. 设置字体时自然要用到CFont类,下面介绍两种方法 ...
- SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- Eclipse详细设置护眼背景色和字体颜色
代码区背景色: 参考地址: http://jingyan.baidu.com/article/d5a880eb6c4f7813f147ccef.html Package explorer 颜色 : ...
随机推荐
- 安全学习笔记-web安全之XSS攻击
web安全之XSS攻击 XSS 即跨站脚本攻击,是 OWASP TOP10 之一.它的全称为 Cross-site scripting,因为 CSS 这个简称已经被占用表示为前端三剑客之一的CSS,所 ...
- 使用vscode Container开发调试envoy
由于我最近在研究 envoy 这个项目,这是个cpp的项目,对于我这种cpp新人来说还是比较有压力的,感觉处处都是坑,开个引导文章记录一下. 如果要研究 envoy 项目源码,那肯定是需要代码跳转的, ...
- 017tcpflow的简单用法
tcpflow tcpflow是服务器上经常使用的一个小程序,它能够捕获tcp的数据流,并将其存储为方便分析和调试的格式.每一条tcp流都会被存储到独立的文件中,因此,典型的tcp流将会被分别存储为进 ...
- GE PACSystems RX3i 输入验证漏洞
受影响系统:General Electric CPE100 < R9.85General Electric CPE115 < R9.85General Electric CPE302 &l ...
- Python之GUI用户界面Tkinter(一)
Label Label(标签)组件用于在屏幕上显示文本或图像,仅能显示单一字体的文本 •参数 Label(master=None, **options) (class)**options 组件选项,下 ...
- spring-注解驱动模式
spring web装配原理: /** * WebApplicationInitializer Spring MVC 提供接口. * * Spring中的web自动配置,也是可以, */ /** * ...
- RabbitMQ 的集群?
镜像集群模式 你创建的 queue,无论元数据还是 queue 里的消息都会存在于多个实例上,然后每次你写消息到 queue 的时候,都会自动把消息到多个实例的 queue 里进行消息同步. 好处在于 ...
- Springmvc入门基础(二) ---架构详解
1.框架结构图 架构流程文字说明 用户发送请求至前端控制器DispatcherServlet DispatcherServlet收到请求调用HandlerMapping处理器映射器. 处理器映射器根据 ...
- Java 建造者Builder
import java.util.ArrayList; import java.util.List; import java.util.function.Consumer; import java.u ...
- Java容器基础概况
一.什么是Java容器 书写程序时,我们常常需要对大量的对象引用进行管理.为了实现有效的归类管理,我们常常将同类的引用放置在同一个数据容器中.Java容器类是java提供的工具包,包含了常用的数据结构 ...