Javascript 使用vue.js创建交互式svg映射

我是vue新手，对使用javascript和d3.js访问DOM元素并进行所需更改的svg交互式地图有一定的经验。现在，我正试图在vue框架内设置这些映射，我是stack

我创建了SvgMap.vue组件，其中包含内联svg映射

<template>
<svg id="karta"
     :class="name"
     xmlns="http://www.w3.org/2000/svg" 
     width="1400" 
     height="960" 
     viewBox="0 0 1400 960">
<g id="wrap">
 <g id="lake">
   <path  d="....">
 </g>
 <g id="area1" class="pol">
   <path  d="....">
 </g>
 <g id="area2" class="pol">
   <path  d="....">
 </g>
 ....
</g>
</svg>
</template>

我希望这个SvgMap.vue组件能够保存svg，包含所有需要的地图数据区域、河流、湖泊、城市等等，。。。此外，我还想创建其他vue组件，这些组件包含导入的内容，可以根据地图所代表的内容对其进行修改。 例如RegionMap.vue不需要显示河流、城市、湖泊等，只需要显示区域。因此，我希望能够使用svg属性进行操作。我知道我可以使用范围样式和css进行一些更改

RegionMap.vue

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

<style scoped>
#karta /deep/ #wrap .pol {
    fill:red
}

#karta /deep/ #wrap .pol:hover {
    fill:black     }
</style>

但有时我需要使用javascript来选择要在地图上显示的内容。 为此，我将给出一个简化的示例：选择所有class.pol并将fill更改为粉红色。 我尝试使用vue组件的脚本部分来访问此元素

<script>
import SvgMap from "./SvgMap"

export default {
    name: "RegionMap",

    components: {
        SvgMap
    },

    created(){
    var pol = document.getElementsByClassName("pol")
    pol.setAttribute("style", "fill:pink")
    }
  }
 </script>

在控制台中，我可以将代码reach pol元素视为HTMLCollection，但我也得到一个错误pol.setAttribute不是函数

如果我不使用道具和css样式，我不知道如何访问我的主svg SvgMap.vue组件中的特定元素并动态更改它。任何建议，我可以使这项工作是欢迎的。或者，如果我走错了方向，你会为这项任务建议什么策略

---

拥有一个主要的svg映射组件并在其他组件中重用它的想法是为了更容易维护。如果某些数据发生了更改，我会在主组件中对其进行更改，并且我重用它的所有组件都是最新的。

更新：我发现了为什么它不工作的问题。 js代码应该在mounted属性中。不理解100%为什么这样工作，在内部创建的属性中没有。我对这些差异表示担忧，但如果vue在创建组件对象时运行已创建的钩子，并且在将组件装入DOM之前，我的逻辑表明它应该可以工作。因此，如果有人知道如何向我解释这一点，我很乐意阅读。

---

无论如何，它是工作的。

An是元素的集合，但不是元素本身。您需要弄清楚如何迭代它，以便可以对集合中的每个元素调用.setAttribute。我知道这一点，但它仍然不起作用，因为如果我只为测试“pol[2].setAttribute”编写代码，我也会遇到错误