Javascript 如何通过vue操作接收到的svg（访问'；<；g>；'；和'；<；rect>；'；元素）

我得到了几个SVG，它们的结构都是这样的：

<?xml version="1.0" encoding="utf-8"?>
<svg>
    ...
    <g id="cabin">
        <g id="1">
            <g id="a">
                <rect />
                <path />
            </g>
            <g id="b">
                <rect />
                <path />
            </g>
        </g>
        <g id="2">
            <g id="a">
                <rect />
                <path />
            </g>
            <g id="b">
                <rect />
                <path />
            </g>
        </g>
        ...
    </g>
</svg>

我正在尝试访问

cab

的所有子注释，以更改

rect

项的

样式。我该怎么做？我以前在一个
html
-文件中用纯
javascript

var plan = document.getElementById("plan");
plan.addEventListener("load",function() {
    dom = plan.contentDocument;
    let cabins = dom.getElementById('cabin');
    ...
    and so on

但我不知道如何在
vue
中执行此操作。我读过一些文章（例如）说，你应该避免直接操作DOM，所以我想肯定还有别的东西

有人能解决这个问题吗？
提前谢谢你
 我最后做了这样一件事：

let numbers = [1, 2]
let g_tags = this.$el.getElementsByTagName('g')

let svg_root
g_tags.forEach(el => {
    if(el.getAttribute('id') === 'cabin') {
        svg_root = el
    }
})

svg_root.children.forEach(obj => {
     let id = obj.getAttribute('id')

     if (numbers.includes(parseInt(id))) {
         obj.firstElementChild.firstElementChild.setAttribute("style", "fill: green")
         obj.lastElementChild.firstElementChild.setAttribute("style", "fill: green")  
     }
})

我想通过使用
this.$el
我访问的是虚拟的
DOM
，而不是真实的
DOM，因此它应该是“合法的”。如果我错了，请告诉我，有更好的解决方案。
是否可以将SVG动态创建为Vue组件，而不是从文件中加载？这样，就可以使用Vue的反应性动态地呈现SVG。在造型方面会给你更多的灵活性。示例：嘿@wwerner，谢谢你的回答。问题是我从外部源获取SVG。在您的示例中，您已经在组件中添加了
属性
，例如
宽度
或
高度
作为
道具
，而我在预定的SVG中缺少这些属性。我需要以某种方式访问
和
，以添加我的样式。
let numbers = [1, 2]
let g_tags = this.$el.getElementsByTagName('g')

let svg_root
g_tags.forEach(el => {
    if(el.getAttribute('id') === 'cabin') {
        svg_root = el
    }
})

svg_root.children.forEach(obj => {
     let id = obj.getAttribute('id')

     if (numbers.includes(parseInt(id))) {
         obj.firstElementChild.firstElementChild.setAttribute("style", "fill: green")
         obj.lastElementChild.firstElementChild.setAttribute("style", "fill: green")  
     }
})