我得到了几个 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
<div ref="plan" v-html="require('!html-loader!../assets/plaene/plan_1.svg')"></div>
我正在尝试访问所有子笔记cabin
以更改项目style
的。rect
我该怎么做?我之前在一个html
简单的文件中尝试过这个javascript
var plan = document.getElementById("plan");
plan.addEventListener("load",function() {
dom = plan.contentDocument;
let cabins = dom.getElementById('cabin');
...
and so on
但我不知道如何在vue
. 我读过一些文章(例如VueJS — 提示和最佳实践),其中说你应该避免直接操作 DOM,所以我想肯定还有别的东西。
有人对此有解决方案吗?先感谢您!