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做背景色时候修改颜色的更多相关文章

  1. QTextEdit中选中文本修改字体与颜色,全部文本修改字体与颜色(设置调色板的前景色、背景色、文字颜色以及基色)

    ----我的生活,我的点点滴滴!! 当然以下内容都可以通过设置样式来达到目的,但是下面不使用这样的方法 先来看张图,理解此图基本就能实现上面所要达到的目的了 Widget::Widget(QWidge ...

  2. [Eclipse] 详细设置护眼背景色和字体颜色并导出

    http://jingyan.baidu.com/article/d5a880eb6c4f7813f147ccef.html Eclipse是一款码农们喜闻乐见的集成开发平台,但是其默认的主题和惨白的 ...

  3. Eclipse详细设置护眼背景色和字体颜色并导出

    Eclipse详细设置护眼背景色和字体颜色并导出 Eclipse是一款码农们喜闻乐见的集成开发平台,但是其默认的主题和惨白的背景色实在是太刺激眼球了.下面,将给大家详细介绍如何设置成护眼主题的方法,也 ...

  4. SVG vs Image, SVG vs Iconfont

    这可能是个别人写过很多次的话题,但貌似由于兼容性的原因?图标的显示还是用着 Iconfont 或者 CSS Sprite 的形式?希望通过自己新瓶装旧酒的方式能重新引导一下问题. SVG vs Ima ...

  5. linux 的终端字体色和背景色的修改方法(三)

    除了在窗口下修改,配置文件中修改外,还可以用shell来修改,此处为B shell linux BASH shell下设置字体及背景颜色 类型:转载 这篇文章主要介绍了linux BASH shell ...

  6. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  7. MFC中修改静态文本框中文字的字体、颜色

    假设有一个静态文本框控件,其ID为:IDC_STATIC_XSDJ,且关联一个control类的CStatic类型的变量m_static_xsdj. 设置字体时自然要用到CFont类,下面介绍两种方法 ...

  8. SVG 学习<五> SVG动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  9. Eclipse详细设置护眼背景色和字体颜色

    代码区背景色: 参考地址: http://jingyan.baidu.com/article/d5a880eb6c4f7813f147ccef.html Package  explorer 颜色 : ...

随机推荐

  1. Wireshark抓包工具解析HTTPS包

    目录 一.遇到的问题 二.解决方案 1. 动态生成签名证书 2. Wireshark配置 3. 最终效果 一.遇到的问题 本学期的计算机网络课程需要使用到Wireshark抓包工具进行网络抓包实验,原 ...

  2. DOS命令基础

    DOS命令 打开CMD win+R,输入cmd. 桌面任何地方按住shift+鼠标右键 ,点击powershell. 我的电脑文件路径前cmd+空格. 开始+系统. 关闭CMD alt+空格+C. 常 ...

  3. 一比一还原axios源码(三)—— 错误处理

    前面的章节我们已经可以正确的处理正确的请求,并且通过处理header.body,以及加入了promise,让我们的代码更像axios了.这一章我们一起来处理ajax请求中的错误. 一.错误处理 首先我 ...

  4. 原生JS实现拼图游戏

    最近无聊,练练原生JS:实现拼图游戏.两种玩法:第一种是单击元素进行交换位置:第二种是拖拽元素进行位置交换.首先需要上传图片并进行回显(需要用到FileReader):下面是部分截图: 可以自行设置切 ...

  5. 纯css做三角形图标

    以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...

  6. sqlmap的使用手册

    0x01. Sqlmap支持的数据库 SQLMap支持的数据库: MySQL Oracle PostgreSQL Microsoft SQL Server Microsoft Access IBM D ...

  7. 序列化和反序列化&持久化

    java序列化与反序列化全讲解 之前一知半解的,对于序列化的概念,为啥用,哪里用也不清楚,现在深入了解协议,先把序列化这个这个概念和和使用场景搞清楚

  8. Spring配置文件?

    Spring配置文件是个XML 文件,这个文件包含了类信息,描述了如何配置它们,以及如何相互调用.

  9. django中动态新建postgres数据库表

    import psycopg2def create_new_table(table_id): conn = psycopg2.connect(database='Test', user='postgr ...

  10. 有没有可能两个不相等的对象有有相同的 hashcode?

    有可能,两个不相等的对象可能会有相同的 hashcode 值,这就是为什么在 hashmap 中会有冲突.相等 hashcode 值的规定只是说如果两个对象相等,必 须有相同的 hashcode 值, ...