Why is my SVG's fill color not changing on hover?

user_6407499 0
Viewed 1344

I'm using VueJS to create an interactive map of Japan. I'm using an SVG provided by Wikipedia. My template is as follows (What's important here is the prefecture and region classes): 

  <div>
<svg id="japanmap" class="nation" viewBox="0 0 1024 1024" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <g fill="#FFFFFF" id="ground" class="nation">
            <g class="nation" stroke="gray" stroke-width="1" stroke-linejoin="round">
                    <g class="region" id="hokkaido region">
                    <g class="prefecture" id="hokkaido">
                            <path d="M591 250l-1 6h-3v-9l6 -2zM620 271l-1 -11 -4 -7 -5 -1 -2 -5 -4 -1 -2 -5 4 -8 -1 -11 2 -3 8 -2 6 -9 3 4 2 -1 4 -9 6 -5 -9 -13v-7l7 -3 14 11 10 -3v3l7 2 6 -2 5 -10 -5 -24 2 -5 8 -4 4 -5 -1 -23 4 -8 1 -11 -3 -17 -8 -19 3 -10 -1 -6 2 3h5l6 -8 26 28 8 13 16 17 29 18 28 6 1 4 6 5h19l22 -27 2 5 -11 24v9l4 6 9 3 -2 2 2 -3h-6l4 13 6 6 5 1 6 -8 8 -1 -11 8 -1 7 -17 3 -2 6 -5 5h-5l-2 -2 1 -2 -2 -1 -4 6 3 2 -15 1 -8 -3 -15 8 -14 16 -8 14 -3 8v16l-2 8 -14 -12 -23 -8 -28 -18 -13 -2 4 -2 -16 8 -15 15 -4 -2 4 -1 -5 -1 -2 -6 -8 -7h-10l-6 8 -3 9 1 5 12 8 10 -1 10 12 8 4 2 3 -6 5 -4 1 -9 -4 -3 3v-5h-3l-2 5 -7 4v9l-8 3 -3 6 -8 -3 -2 -7 1 -9zM659 58l2 -2 4 1 2 5 -4 4 -4 -4zM653 45v-1l2 2 -1 9 -4 -10zM957 29l-2 -5h-2l-2 4 2 7 -1 3 -5 1 -2 8 -7 -2 1 7 -10 10 -1 4 -5 -1v3l4 1v4l-4 4 -4 -1 1 5 -3 -4 1 5 -3 7 4 1 4 -9 6 -1 4 -9 10 -9 3 -10 5 2 6 -1 15 -18 13 -9 9 -1 1 -4 -2 -3 2 -4 -5 -2 -6 2 -12 17 -11 3zM878 110l5 -6 8 -2 5 -6 3 1 3 -7 -11 3 -7 -5 -4 2 -3 11 -10 14v3l-13 15 2 7 5 -1v5l1 -14 8 -4 1 -6h3v-7zM910 136l11 -9 -4 -3 -4 3 1 2 -7 1v4l2 -1zM888 154l3 -5 -6 1zM878 157l2 -2h-4z"/>
                    </g>
                    </g>
                    <g class="region" id="tohoku region">
                    <g class="prefecture" id="aomori">
                            <path d="M613 358v-7l-4 -4 7 -8h5l7 -4 2 -16 -3 -5 3 -1 1 -7 6 5 4 -3 4 2 2 15 3 7 6 -3 -1 -4 2 -4 11 8 3 -2 4 -16 -4 -7 -6 6 -14 3 6 -26 17 12 9 -5 -3 31 3 14 4 11 4 -1 5 5 -6 7 -5 -1 -4 2 -2 -2 -14 10 -3 -2 1 -11 -5 1v-6l-11 7 -3 -2 -2 2 -7 -5 -3 3 -13 -1 -2 3z" />
                    </g>
    ...
    ...

I also have the following javascript which gets all prefecture class elements and applies a mouseover event listener that changes the fill color. 

<script>
export default {
  name: "Map",
  mounted: function() {
        const japanMap = document.getElementById('japanmap');
        const prefectures = japanMap.getElementsByClassName('prefecture')
        for (let i = 0; i < prefectures.length; i++) {
                const prefecture = prefectures[i];
                prefecture.addEventListener('mouseover', (e) => {
                        e.target.style.fill = "#E74C3C";
                        console.log(e.target);
                });
        }
  }
};

The message gets logged to the console but the fill color of the element does not change.

vue.js svg html javascript
1 Answers

It can be done using Vue directives and you shouldn't actually be using Javascript DOM manipulations to achieve that.

Simply add @mouseover="changeFillColor" and @mouseout="resetFillColor" directives to the elements that should have their fill changed when hovered.

  methods: {
    changeFillColor(e) {
        e.target.style.fill = "orange"
    },
    resetFillColor(e) {
        e.target.style.fill = ""
    }
  }

Or using only one directive (mouseover):

changeFillColor(e) {
  e.target.style.fill = "orange"
  e.target.addEventListener('mouseout', () => e.target.style.fill = '', false)
}

Example #1: http://jsfiddle.net/dsngf6ec/

Example #2: http://jsfiddle.net/dsngf6ec/5/

Based on your SVG (had to edit it a little to make it work): http://jsfiddle.net/dsngf6ec/55/

user_91650260
Related