javascriptvue.jswebpack-html-loader

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


I'm getting several SVG's that are all structured like this:

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

I'm loading the SVG via the html-loader

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

I'm trying to access all child notes of cabin to change the style of the rect items. How should I do this? I tried this before in a single html-file with plain javascript

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

but I don't know how to do this in vue. I have read some articles (e.g. VueJS — Tips & Best Practices) which say that you shold avoid manipulating the DOM directly, so I guess there must be something else.

Has somebody a solution for this? Thank you in advance!


Solution

  • I ended up doing this:

    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")  
         }
    })
    

    I guess by using this.$el I access the virtual and not the real DOM, so it should be "legal". Please let me know if I'm wrong and there is a better solution.