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. think php 公共目录common.php json封装

    <?php function getJsonData($code,$massage,$data){ $result=[ 'code'=>$code, 'massage'=>$mass ...

  2. MYSQL数年库安装

    MySQL系列 MySQL 的三大主要分支mysqlmariadbpercona Server MySQL系列2.2.2.1 MySQL 的三大主要分支mysqlmariadbpercona Serv ...

  3. BBS项目分布搭建四(点赞点踩及评论功能准备)

    BBS项目分布搭建四(点赞点踩及评论功能) 1. 点赞点踩样式准备 # 在base.html文件中 head标签内 添加css模块: {% block css %} {% endblock %} # ...

  4. 2.6 C++STL queue详解

    文章目录 2.6.1 引入 2.6.2 代码示例 2.6.3 代码运行结果 总结 2.6.1 引入 首先,在STL中 queue 和 stack 其实并不叫容器(container),而是叫适配器(a ...

  5. CentOS 7.5 安装配置tigervnc-server

    系统版本: [root@s10 ~]# cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) 1.安装 Gnome 包 [root@ ...

  6. 6月5日 python复习 模块

    """1. os和sys都是干什么的?2. 你工作中都用过哪些内置模块?3. 有没有用过functools模块?"""1. os 系统相关 ...

  7. 深入理解RPC—序列化

    深入理解RPC-序列化 xiaofang233 2020-09-18 16:38:22 1024 收藏 6分类专栏: 分布式服务版权为什么需要序列化?首先,我们得知道什么是序列化与反序列化. 我们先回 ...

  8. Dubbo SPI 和 Java SPI 区别?

    JDK SPI JDK 标准的 SPI 会一次性加载所有的扩展实现,如果有的扩展吃实话很耗时,但 也没用上,很浪费资源. 所以只希望加载某个的实现,就不现实了 DUBBO SPI 1,对 Dubbo ...

  9. 如何使用 Spring Boot 实现分页和排序?

    使用 Spring Boot 实现分页非常简单.使用 Spring Data-JPA 可以实现将可分页的传递给存储库方法.

  10. Kafka 新旧消费者的区别?

    旧的 Kafka 消费者 API 主要包括:SimpleConsumer(简单消费者) 和 ZookeeperConsumerConnectir(高级消费者).SimpleConsumer 名字看起来 ...