img标签src引入svg如何修改颜色

主要是通过阴影和position: relative，改变img标签引入的svg的颜色

话不多说，上代码：

<div class="icon">
<img src="@/static/img/icon/go.svg"/>
</div>

.icon{
   overflow: hidden; //配合相对布局，将原图溢出容器并隐藏
   display: inline-block;
   line-height: 12px; //行内元素会有个默认行高，所以得覆盖，不然图片可能看不到
   img{
       width: 6px;
       height: 12px;
       position: relative;
       left: -20px; //设置一个大于图片宽度的值，将图片溢出隐藏
       filter: drop-shadow(#333333 20px 0); //设置颜色，并将阴影偏移至未溢出区域
       -webkit-filter: drop-shadow(#333333 20px 0); //兼容其它浏览器
   }
}

img标签src引入svg如何修改颜色相关推荐

图片转换svg并修改颜色
图片转换svg并修改颜色前言效果先把图片转成SVG 方式一方式二 SVG修改颜色前言这里记录下把图片为png,jpg等格式转换成svg格式的图片,我们可以使用在线转换工具,也可以在谷歌浏览 ...
img中src引入svg,修改svg颜色
<div class="image"><img src="1.svg" /> </div> .image{display: ...
vue项目中img使用svg图片修改颜色
需求:就是左边是文字,右边是文字,中间是一个箭头图片前言:抛开vue项目已经封装好了svg的组件这种来讲,封装的可以直接使用color来进行改变颜色,然后这里讲下没有封装的写法 1:首先改svg图片 ...
iconfont 的symbol字体如何修改颜色 / svg如何修改颜色？
从阿里巴巴库下载的 svg 图标默认带有 fill 属性,默认是带有颜色的,想要修改先把原fill颜色去掉,如下,然后再去下载使用
svg android怎么填充颜色,android svg 使用方法及修改颜色
时隔3年,庆幸自己还在安卓开发这一行,也算是累计了些知识,现在在工作之余,也有些时间来记录些自己平时使用的一些技术,希望这次回来,可以捡起这份博客,写一些自己喜欢的内容. 最近在工作中,碰到了一个需要 ...
修改svg图片的颜色html,通过CSS改变svg image引入的图片颜色？
在html元素中通过background设置图片icon,然后通过css3的filter滤镜的drop-shadow 设置阴影来呈现这种改变图片颜色的效果.很不错的方法. 但是我现在的元素是在svg中 ...
关于svg阿里矢量图无法修改颜色
关于svg阿里矢量图无法修改颜色直接官网可以去色第二种方法修改iconfont中的js文件 fill = "white" (例子) 来修改颜色QAQ 直接官网可以去色第二种方 ...
学习踩坑：在Vue项目中使用svg标签却无法改变图标的颜色
在Vue项目中使用svg标签却无法改变图标的颜色在学习 vue 实战项目的过程中,用到了 svg 模块,对其使用了 fill 属性后,图标的颜色却没有任何的改变,反复查看了视频,步骤是一模一样的,却 ...
iconfont-阿里巴巴矢量图标库 Symbol引入无法修改颜色问题
有些图标是用fill属性定义颜色的用color属性修改颜色肯定是不行的 icon{fill: #ffffff;//就可以了 } 官方示例 .icon {width: 1em; height: 1em ...

img标签src引入svg如何修改颜色

img标签src引入svg如何修改颜色相关推荐

最新文章

热门文章