修改vue项目中的全局-局部的svg样式

**修改Vue项目中的全局-局部SVG样式**

在Vue项目中，SVG是常见的图标组件。然而，在实际开发过程中，我们可能会遇到这样的问题：如何修改全局的SVG样式，而又不影响局部的SVG样式？本文将详细介绍如何实现这一点。

### 全局SVG样式首先，让我们来看一下全局SVG样式是如何定义的。通常，我们会在Vue项目的`main.js`文件中定义一个全局的CSS类，例如：

css/* main.js */
import Vue from 'vue'
import App from './App.vue'

Vue.use(i18n)

// 全局SVG样式const globalSvgStyle = `
 .svg-icon {
 width:20px;
 height:20px;
 fill: #333;
 }
`

document.head.appendChild(document.createElement('style')).innerHTML = globalSvgStylenew Vue({
 render: h => h(App),
}).$mount('#app')

在上面的代码中，我们定义了一个全局的CSS类`.svg-icon`，用于设置SVG图标的样式。

### 局部SVG样式接下来，让我们看一下如何在局部组件中定义自己的SVG样式。例如，在`components/HelloWorld.vue`文件中，我们可以定义如下代码：

vue<!-- components/HelloWorld.vue -->
<template>
 <div class="hello">
 <svg class="icon" aria-hidden="true">
 <use xlink:href="#icon-hello-world" />
 </svg>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data() {
 return {}
 }
}
</script>

<style scoped>
.hello {
 display: flex;
 justify-content: center;
 align-items: center;
}

.icon {
 width:50px;
 height:50px;
 fill: #666;
}
</style>

在上面的代码中，我们定义了一个局部的CSS类`.icon`，用于设置SVG图标的样式。

### 修改全局-局部SVG样式现在，我们需要修改全局的SVG样式，而又不影响局部的SVG样式。我们可以通过以下方式实现：

css/* main.js */
import Vue from 'vue'
import App from './App.vue'

Vue.use(i18n)

// 全局SVG样式const globalSvgStyle = `
 .svg-icon {
 width:20px;
 height:20px;
 fill: #333;
 }
`

document.head.appendChild(document.createElement('style')).innerHTML = globalSvgStyle// 局部SVG样式const localSvgStyle = `
 .hello .icon {
 width:50px;
 height:50px;
 fill: #666;
 }
`

document.head.appendChild(document.createElement('style')).innerHTML += localSvgStylenew Vue({
 render: h => h(App),
}).$mount('#app')

在上面的代码中，我们定义了一个局部的CSS类`.hello .icon`，用于设置SVG图标的样式。我们通过追加新的CSS规则来覆盖全局的CSS规则。

### 总结本文介绍了如何修改Vue项目中的全局-局部SVG样式。在实际开发过程中，我们可能会遇到这样的问题：如何修改全局的SVG样式，而又不影响局部的SVG样式？通过追加新的CSS规则来覆盖全局的CSS规则，可以实现这一点。