Javascript 上次导入的svg vue组件覆盖其他组件

我是vue.js的新手，仍在试图弄清楚它是如何工作的。也许我走错了方向，因为我错过了一些东西，所以请帮助我

我的国家地图存储在svg文件中。所以我制作了SvgMap.vue单文件组件，其模板包含内联svg代码

SvgMap.vue

<template>
 <svg 
     id="map" 
     :class="name"
     xmlns="http://www.w3.org/2000/svg" 
     width="1400" 
     height="960" 
     viewBox="0 0 1400 960" 
     xmlns:xlink="http://www.w3.org/1999/xlink">

      <g id="Area1>
        <path class="pol" d="..."
      </g>

      <g id="Area2>
        <path class="pol" d="..."
      </g>
</svg>
</template>

<script>
 name: "SvgMap",
 props:["name"]
</script>

<style>
.pol {
  fill:"black"
</style>

您应该通过向标记添加
scoped
来确定组件样式的范围，如下所示

<style scoped>
...
</style>


...
好的，它正在工作，我没有意识到作用域的使用。谢谢我可以动态地更改样式以确定其作用域与否？不，您不能，如果您想要全局样式，请在应用程序级别添加它
<template>
  <div v-for="component in components" :key="component" >
      <component v-bind:is="component"></component>
  </div>
</template>

<script>
import SvgMap1 from "./SvgMap1"
import SvgMap2 from "./SvgMap2"

export default {
name: "Main",

data(){
return {
 components:[SvgMap1,SvgMap2]
}
},

components: {
    SvgMap1,SvgMap2
}
</script>

<style>
</style>

<style scoped>
...
</style>