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

Question

我得到几个结构如下的 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>

我正在通过 html-loader

加载 SVG

<div ref="plan" v-html="require('!html-loader!../assets/plaene/plan_1.svg')"></div>

我正在尝试访问 cabin 的所有子笔记以更改 rect 项目的 style。我应该怎么做？我之前在一个 html 文件中尝试过这个 javascript

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

但我不知道如何在 vue 中执行此操作。我看过一些文章（例如VueJS — Tips & Best Practices）说你应该避免直接操纵DOM，所以我想一定有别的东西。

有人对此有解决方案吗？提前致谢！

Answer 1

我最终这样做了：

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，所以它应该是 "legal"。如果我错了请告诉我，还有更好的解决方案。

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

How to manipulate a received svg (access '<g>' and '<rect>' elements) via vue

javascript

vue.js

webpack-html-loader