动态修改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 颜色 : ...
随机推荐
- 微信小程序实现图表展示
开发可参考以下链接 点击有道云链接 小程序柱状图展示 [单元目标] 掌握小程序柱状图展示 [教学内容] 1.1 掌握组件导入 在miniprogram下的utils文件夹(若没有就新建一个)下,新建w ...
- iframe于iframe页面之间的函数相互调用
因为iframe页面于包括父页面在内的其他页面通讯有跨域问题,所以只有在服务器环境下或者火狐浏览器下才能测试. 在iframe页面调用父页面的函数采用parent,例子:在父页面有一个say()函数, ...
- xxl-job踩坑记录——执行器,执行10分钟自动失败
问题描述 上一篇Docker 部署xxl-job 报错:xxl-rpc remoting error(connect timed out), for url : xxxxxx - 这行代码没Bug - ...
- QQ密码防盗5招
第一招:复制粘贴防木马 每次登录QQ前,新建一个文本文件,并键入密码后复制,关闭文本文件后(不要保存)打开QQ,用"Ctrl+V"把密码粘贴到密码栏里,这样可以防范绝大部分的QQ木 ...
- SpringBoot中常用的45个注解
1.SpringBoot/spring @SpringBootApplication: 包含@Configuration.@EnableAutoConfiguration.@ComponentScan ...
- 保姆级SpringBoot+Vue图片上传到阿里云OSS教程
小二是新来的实习生,作为技术 leader,我给他安排了一个非常简单的练手任务,把前端 markdown 编辑器里上传的图片保存到服务器端,结果他真的就把图片直接保存到了服务器上,这下可把我气坏了,就 ...
- DataStage中Transformer的函数大全
一. 类型转换函数 类型转换函数用于更改参数的类型. 以下函数位于表达式编辑器的"类型转换"类别中.方括号表示参数是可选的.缺省日期格式为 %yyyy-%mm-%dd. 以下示例按 ...
- xilinx SDK在线仿真_烧写 提示失败
1.找到工程目录下的Binaries->xxx.elf-[arm/le] . 2.右击该elf,选择Debug As->Debug Configurations... 进入设置界面. 3. ...
- python程序unix密码破解
# qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 #!/usr/bin/env python #指定这是一个python文件,使用这个 ...
- ms17-010-永恒之蓝漏洞利用教程
实验环境:虚拟机:kali-linux windows 7 请自行下载安装 1.打开虚拟机 启动kali-linux 启动windows7(未装补丁) 2.获取IP地址(ifconfig ipconf ...