vue项目中img使用svg图片修改颜色

需求：就是左边是文字，右边是文字，中间是一个箭头图片

前言：抛开vue项目已经封装好了svg的组件这种来讲，封装的可以直接使用color来进行改变颜色，然后这里讲下没有封装的写法

1：首先改svg图片的颜色，可以直接使用**fill=“想要的颜色”**来修改颜色。然后我这个需要点击修改颜色，是动态的，写死只满足一种情况。

// svg图片中
fill="red"  // 你想要的颜色

2：然后去网上找，主流的就是这个了，将fill改为currentColor，然后通过继承父元素color属性可以改变颜色。（但是这种貌似不支持img引入的图片，所以还是没效果）

// svg图片中
fill="currentColor"
// vue页面中, 你要改的那个svg图片的类名，使用fill改颜色即可
.svg-icon{fill:red;
}

3：然后功夫不负有心人，找到了这个，查了一下drop-shadow是添加一个可以修改颜色的阴影，然后直接cv，效果如下

  <div class="svg"><img src="./firefox-logo.svg" class="svg-color"></div>//css
.svg {width: 30px;height: 30px;overflow: hidden;
}
.svg-color {transform: translateX(30px);filter: drop-shadow(#ff0000 -30px 0px 0px);
}

4：看着英文这两个字，就红框框住的地方，第3步的时候说了，drop-shadow是一个投影，这个就是投影出来的结果，就如果你是一张单独的图片，可以直接使用overflow：hidden将这个投影隐藏，但是这里我试过了，不能隐藏，然后我想到因为选中的是白色的，往上能不能行，因为图片默认我是蓝色的，选中后改为白色嘛，刚好背景色也是白色，改成了如下效果:使用y轴投影，但是由于蓝色和白色重叠了，导致颜色很淡，还是没啥用

.svg-icon{transform: translateY(0px);filter: drop-shadow(#ffffff 0px 0px 0px);
}

5：最后，抛弃了在vue文件中改变颜色img图片的想法，由于我是点击事件，点击的时候有下标，所以我就将这种图片改为了蓝色和白色两张图片，使用下标判断显示那张图片即可。效果是有了，但是差强人意，麻烦有更好的思路私聊一下我。这里写下自己的思路，记录一下。

// 伪代码
<span v-if="index== 0">中文 <img src="@/assets/蓝色图片.svg" v-if="index != 选中的下标" style="position:relative; top:-10px;" /><img v-else src="@/assets/白色图片.svg" style="position:relative; top:-10px;" /> 英文
</span><span v-if="index== 1">英文 <img src="@/assets/蓝色图片" v-if="index != 选中的下标" style="position:relative; top:-10px;" /><img v-else src="@/assets/白色图片.svg" style="position:relative; top:-10px;" /> 中文
</span>

vue项目中img使用svg图片修改颜色相关推荐

vue项目中，图片无法显示时或者访问图片出现404时，显示默认图片，但默认图片路径出错
问题描述在vue项目中,同样的图片,设置在img的src中能正常显示设置在img的onerror中不能正常显示原因项目启动后, 图片的路径并不是我们写的路径了. 示例: 源代码: // 直 ...
在vue项目中使用svg图标
目录 VUE项目中为什么使用svg 1.在src/components下创建文件夹,命名为SvgIcon,并再SvgIcon文件夹下,新增目录index.vue文件: 2.在src目录下,新增文件夹, ...
svg图片在vue项目中的应用
svg图片在vue项目中的应用一.安装 svg-sprite-loader 插件 npm install svg-sprite-loader 二.基于 vue-cli2.x 项目 webpack 配 ...
Vue项目中操作svg文件
Vue项目中使用svg 引入依赖 yarn add svg-sprite-loader -D [可选] yarn add svgo svgo-loader -D 依赖说明: svg-sprite-lo ...
vue 项目中，动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标需求: 项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标实现: 1.找到项目中的app.vue 文件,动态创建link标签,调用后 ...
vue项目中使用svg，通过img标签轻量解决方案，支持动态颜色更改
前言 svg的优点不多说,怎么在vue项目优雅的使用svg?通过img似乎很优雅简单,但是你知道通过img引入svg怎么更改颜色吗?知道怎么动态切换颜色吗? 一.components下创建自定义公共s ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
如何在vue项目中修改less变量，多主题项目解决方案
如何在vue项目中修改less变量,多主题项目解决方案参考文章: (1)如何在vue项目中修改less变量,多主题项目解决方案 (2)https://www.cnblogs.com/niubilit ...

vue项目中img使用svg图片修改颜色

vue项目中img使用svg图片修改颜色相关推荐

最新文章

热门文章