vue使用 svg图片以及修改svg图片颜色

一、如何使用svg

1.创建svg专用文件夹，里面只存放svg图片

2. 创建SvgIcon组件

<template><div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /><svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"><use :xlink:href="iconName" /></svg>
</template><script>
import { isExternal } from '@/utils/validate'export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true},className: {type: String,default: ''}},computed: {isExternal () {return isExternal(this.iconClass)},iconName () {return `#icon-${this.iconClass}`},svgClass () {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}},styleExternalIcon () {return {mask: `url(${this.iconClass}) no-repeat 50% 50%`,'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`}}}
}
</script><style scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em; overflow: hidden;
}.svg-external-icon {background-color: currentColor;mask-size: cover!important;display: inline-block;
}
</style>

3.创建index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component// register globally
Vue.component('svg-icon', SvgIcon)const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

4.main.js 引入

import '@/icons'

二、修改svg图片颜色

修改颜色的时候要注意，首先svg文件里面不能有fill属性，否则无法修改，例如：

如果有的，需要把fill属性全部去掉。

但是下面这种格式，我去掉fill 也无法修改，只能重新切图了

接下来就是使用修改颜色了（伪代码）：

  <svg-icon icon-class="more" class="but_icon"></svg-icon>//使用//修改颜色.svg-icon {fill: rgba(0, 0, 0, 0.65);}

vue使用 svg图片以及修改svg图片颜色相关推荐

vue实现echarts树图修改节点图片，修改连线颜色，鼠标悬停显示详情，鼠标右键弹出菜单，搜索，导出PNG，高亮，查看节点是否还有子节点，修改树图的展示方式
其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章首先,实现效果入下图: ...
vue动态设置style属性修改背景图片
原始class属性设置背景样式 .bannerP {position: absolute;top: 0;left: 2.96rem;right: 0;bottom: 0;background: url ...
电脑怎么压缩图片大小kb？图片太大怎么缩小kb？
相信大家在平时都会使用到图片,在需要将图片上传到某些平台使用的时候应该都会遇到由于图片太大上传失败的情况,这时我们就需要先压缩图片大小后再进行使用了,那么如何快速将图片压缩呢?今天来给大家分享一款非常 ...
05 react img css修改svg图片样式
react img css修改svg图片样式 svg图片的相关理论定义优点前端引入svg图片的方式方式一:<svg>标签引入,内嵌到 HTML 中方式二,修改svg的颜色方式三 ...
动态修改svg图片颜色
使用场景引入颜色为纯色的svg图片时,动态修改svg图片填充颜色.引入的方式包括直接svg代码引用和img标签间接引用. 直接引用SVG 如果通过svg代码的方式引入图片,那么可以直接修改fill属 ...
图片转svg并动态修改其颜色
假设你的SVG已封装好,在页面中可以使用,如: 今天我们不讲如何封装的,只关心SVG文件 1.将UI老师给的图转成SVG 转换地址:https://convertio.co/zh/png-svg/ 转 ...
将图片转化成SVG格式（亲测可行）
1.准备好要转化的图片可以看到左侧图片是一个jpg格式的,接下来我们就把它转化成svg格式; 2.打开SVG在线编辑器,把图片导入我们可以打开SVG在线编辑器,在SVG编辑器中导入图片并根据我们需 ...
自制批量SVG矢量图转普通图片格式小工具
最近在学unity自制一点小游戏,当然我们这种主攻开发的,在学习阶段肯定只能借(tou)美工素材来学习了. 本来拿到了一系列的动画,但是是SVG的矢量图格式的,原生unity对SVG矢量图支持不太好, ...
Javascript的新领域——动态图片处理之SVG
近三年前的一篇旧文,虽然在浏览器和相关技术标准方面有过时之处,但总体上对概念的理解.开发的思路和代码样例仍然有参考价值. 背景当Javascript被Netscape公司发明出来时,它被用来做一些琐 ...

vue使用 svg图片以及修改svg图片颜色

vue使用 svg图片以及修改svg图片颜色相关推荐

最新文章

热门文章