svg图片hover变色，居然只用一个vue指令就可以搞定！千万别在写两个控制显影了！

背景简介

在前端开发中，我们经常会遇到这样的一个需求：hover一个svg图片，svg展现不同状态的样式。

大家常见的写法就是引入两个颜色状态的svg，然后通过v-show控制显影

<template>
  <div>
    <button @click="toggleColor">切换svg颜色</button>
    
    <svg v-show="isRed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
     
    <svg v-show="!isRed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
    </svg>
  
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRed: true
    };
  },
  methods: {
    toggleColor() {
      this.isRed = !this.isRed;
    }
  }
};
</script>

这样实现不是不可以，但是非常繁琐，维护成本高。实际上，对于一些简单的svg图片（仅通过fill即可决定其颜色），我们只需要改变它的填充颜色就行，实在没必要把一个svg写两边！

比如，上面的svg图片，我们只需要改变fill填充颜色，就可以改变svg的颜色！

所以，我们现在用更简单的方式自定义vue指令实现这个效果！我们先看看成品代码是如何使用的！

<template>
  <span v-color="blue">
    <svg v-show="isRed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
  </div>
</template>

成品代码中，我们仅仅给svg的父标签添加了指令"v-clor='blue'"，就轻松实现了hover这个svg变色的效果！超级简单方便！

使用指令实现svg图片hover变色

实现hover变色，我们的核心原理就是获取到svg这个dom，然后更改其fill的值。为了让这个逻辑可以全局复用，我们将它封装成vue指令的形式！

vue指令

正式开发前，你必须熟悉vue自定义指令的基础概念：

官网Api传送门：Vue.js

官方是这么介绍的：除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。

一个基本的全局指令，开发使用有三步：

1、创建指令文件directives/color.js

// 自定义指令名称
const color = {
   // ....指令逻辑
}

// 挂载，注册
const directives = {
  install: function (app: any) {
    app.directive('color', color)
  }
};

// 导出
export default directives;

2、mian.js中注册自定义指令

import { createApp } from 'vue';
import App from './App.vue';
import color from './directives/color';

const app = createApp(App);

app.directive('color', color);

app.mount('#app');

3、使用自定义指令

<template>
  <div v-color>
    <svg>
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
  </div>
</template>

开发思路

hover变色功能实现

vue指令有几个重要钩子(都是可选的)：

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

这意味着，当我们把指令v-color写到div标签上时，我们通过beforeMount可以获取到div这个dom

<template>
  <div v-color>
    <svg>
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
  </div>
</template>

// 拖拽的指令
const color = {
  beforeMount(el: any) {
    // el就是div这个dom元素本身
    // ...
  }
}
// 挂载，注册
const directives = {
  install: function (app: any) {
    app.directive('color', color)
  }
};
export default directives;

那么实现hover svg图片变色就非常容易了

// 拖拽的指令
const color = {
	beforeMount(el: any) {
		const wrapDom = el;
		const svg = el.querySelector("svg");
		wrapDom.onmouseenter = function () {
			svg.style.fill = "rgb(0, 101, 179)";
		};
		wrapDom.onmouseleave = function () {
			svg.style.fill = "#C7CBCF";
		};
	}
};
// 挂载，注册
const directives = {
	install: function (app: any) {
		app.directive("color", color);
	}
};
export default directives;

你可能有疑问，为啥指令不直接写在svg本身，非要放在一个父元素上。这样做的目的好处就是：你的svg可以通过各种方式引入，指令更加安全！比如，当svg以组件的形式引入时，指令写在组件上是不安全的。

动态传递颜色

上述代码颜色是写死的，我们可以给v-color传参，让其颜色更加丰富！

<template>
  <div v-color="blue">
    <svg>
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="gary" />
    </svg>
  </div>
</template>

// 拖拽的指令
const color = {
	beforeMount(el: any, binding: any) {
    // binding可以获取到指令的一些列数据，valu属性是绑定的参数
		const wrapDom = el;
		const svg = el.querySelector("svg");
    // 储存svg原本的颜色
    const originColor = svg.style.fill
		wrapDom.onmouseenter = function () {
			svg.style.fill = binding.value;
		};
		wrapDom.onmouseleave = function () {
			svg.style.fill = originColor;
		};
	}
};
// 挂载，注册
const directives = {
	install: function (app: any) {
		app.directive("color", color);
	}
};
export default directives;

如上述代码，我们就完美的实现了svg颜色的动态传入！简单粗暴！

复杂的svg图片如何处理

上述代码仅能针对一些简单的svg图片，改变其fill填充颜色。但是对于一些复杂的svg，它的颜色除了填充颜色，还有很多其他属性决定，上述代码就 无力回天了！但是，我们可以通过改变代码实现加载不同的svg。

如下面代码，我们调整了v-color的入参，它是一个数组，数组第一位是一个普通状态的svg，数组第二位是hover状态的svg。

<template>
  <div v-color="[home,hoverHome]"></div>
</template>

import home from "@/assets/home.svg?raw";
import hoverHome from "@/assets/home.svg?raw";

注意这两个svg引入方式，都是一个字符串！具体引入原理参考我的其他文章：juejin.cn/post/717346...

我们的指令代码只需要做如下更改即可

// 拖拽的指令
const color = {
	beforeMount(el: any, binding: any) {
    const svg = binding.value[0];
		const hoverSvg = binding.value[1];
		el.onmouseenter = function () {
			el.innerHTML = hoverSvg
		};
		el.onmouseleave = function () {
			el.innerHTML = svg
		};
	}
};
// 挂载，注册
const directives = {
	install: function (app: any) {
		app.directive("color", color);
	}
};
export default directives;

是不是超级简单？

总结

这篇文章使用指令实现了svg图片的hover效果，对于普通的svg图片，我们可以借助指令直接改变其fill属性，进而改变svg的颜色。

对于复杂svg图片，改变fill属性不可行，但我们可以引入两种状态的svg图片字符串，借助指令动态改变svg父级元素的innerHTML。

大家如果还有更好的方案，欢迎交流！