Last imported svg vue component overwrite other component

Question

I am new to vue.js and still trying to figure out how it works. Maybe I am in wrong direction cos I am missing something so pls help.

I have country map stored in svg file. So I made SvgMap.vue single file component whose template contain inline svg code.

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>

From that main svg map/component I want to make two new maps which are just modified maps of SvgMap. Let's say SvgMap1.vue (when hover over polygon is red) and SvgMap2.vue (when hover over polygon is blue).

SvgMap1.vue

<template>
<svg-map name="Area1"></svg-map>
</template>

<script>
import SvgMap from "./SvgMap"

export default {
name: "SvgMap1",

components: {
    SvgMap
}
</script>

<style>
.pol:hover {
fill:"red"
</style>

SvgMap2.vue is equal to SvgMap1 but of course customized with name="Area2" and fill color for hover is blue.

And than I have Main.vue component where I want to show this maps on some button click.

Main.vue

<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>

In inspector I can see both maps (SvgMap1 and SvgMap2) are generated, but style is always from map that is last imported (hover blue). I even tried to hide second one, but still hover is blue. When I changed the order of importing maps, then hover is red. I don't understand this.

The idea behind this is that I want to have one main svg map as vue component from where I want to generate different maps and use it in my app (changing colors, title, ect). So when I need to update some data, I just update main svg map.

jeremy castelli jeremy castelli · Accepted Answer · 2020-09-16T12:22:45

You should scope your component's style by adding scopedto the tag like so

<style scoped>
...
</style>

Last imported svg vue component overwrite other component

1 Answers