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. [USACO20FEB]Equilateral Triangles P 题解

    优雅的暴力. 设三个点为 \((i,j,k)\),则有 \(6\) 个未知数即 \(x_i,x_j,x_k,y_i,y_j,y_k\).又因为有 \(2\) 条关于这 \(6\) 个未知数的方程 \( ...

  2. cookie、session和Storage

    概念: cookie:HTTP响应头的一部分,通过name=value的形式存储,主要用于保存登录信息.在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭. 存放数据大小为4K左右 .有个 ...

  3. Web调试工具之调试方法

    转载于: http://toutiao.com/news/6242781162012410370/ 一.Firefox 插件之 Firebug, 火狐调试利器[初学必备] 为什么要第一个提到火狐呢?因 ...

  4. rancher更新集群证书

    进入rancher 等待更新完成 查看证书到期时间 >>>在rancher容器内部执行查看集群证书信息 for i in ls /var/lib/rancher/k3s/server ...

  5. 前端知识之css样式

    前端之CSS样式 css介绍 css是为html标签设置样式的 css由选择器和声明组成 声明包括属性和属性值 声明之间用分号:隔开 css注释 /注释类容/ css的几种引入方式 行内样式 不推荐使 ...

  6. Rafy 框架:领域控制器

    本文简要说明如何使用 Rafy 框架中的领域控制器. 简介 领域控制器是 Rafy 框架中用于封装领域逻辑的主要方式. 在控制器中,开发者可以封装大量的业务逻辑,并向外暴露业务接口.内部的逻辑在实现时 ...

  7. Golang 包了解以及程序的执行

    Golang 包了解以及程序的执行 引言  Go 语言是使用包来组织源代码的,包(package)是多个 Go 源码的集合,是一种高级的代码复用方案.Go 语言中为我们提供了很多内置包,如 fmt.o ...

  8. 搭建分布式事务组件 seata 的Server 端和Client 端详解(小白都能看懂)

    一,server 端的存储模式为:Server 端 存 储 模 式 (store-mode) 支 持 三 种 : file: ( 默 认 ) 单 机 模 式 , 全 局 事 务 会 话 信 息 内 存 ...

  9. Adobe AIR 应用程序图标详细描述

    官方PDF文档: http://help.adobe.com/zh_CN/air/build/WS901d38e593cd1bac1e63e3d129907d2886-8000.html#WS901d ...

  10. HashMap?ConcurrentHashMap?

    Java团长在csdn 2019-02-06 19:58:00  104241  收藏 666     来源:crossoverJie(ID:crossoverJie) 前言 Map 这样的 Key ...