Bonjour, 

Dans un fichier SVG, j'ai deux éléments:

 et j'aimerai mettre un hover sur les deux éléments en même temps (le rectangle bleu et le rectangle vert ).

et Non un truc comme ça :

  (il manque le rectangle vert).

Ma seule solution serait de récupérer l'élément parent, et en Javascript faire le hover (vue qu'apparemment je ne peut pas le faire en css).

J'aimerai essayer avec vue JS : 

var app = new Vue({
    el: '#app',
    data: {
        hover:false
    },
});
methods: { mouseOver: function(){
 //on vise l'élément parant et on met que le hover est active ? .....elementparent = this.hover = false; 
}
 }

Merci ^^'

-
Edité par Cielphis 15 février 2019 à 13:30:05

Salut,

Gère simplement le hover de ton svg et agis sur ses enfants :

.tonSVG:hover .enfant1,
.tonSVG:hover .enfant 2 {
    /* ce que tu veux */
}

salut,

J'ai voulu essayer cette méthode mais mon SVG est incompréhensible^^' . C'est un fichier de 20 000 lignes avec énormément de balises g . Quand j'essaye ta méthode proposer :

//les bureaux st15 & st16
$color-desk: #92cddc;
$stroke-desk: #1f477d;
$hover-desk: orange;
$title-desk: #d3e8aa;


.st15 {
    fill: $color-desk;
    stroke: $stroke-desk;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1;
    &:hover{
        fill:$hover-desk;
    }
}

.st16 {
    fill: $title-desk;
    stroke: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1;
    &:hover {
        fill: $hover-desk;
    }
}

svg:hover .st15, svg:hover .st16 {
    fill: $hover-desk;
}

Ca ne vas pas car il me faut qu'un seul rectangle avec son titre qui doit me concernait .

Je crois bien que je suis obligé de passé par le JS:

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue! in About Page',
        hoverActive: false,
    },
    methods:
    {


        mouseOver: function (event) {
            //nos 2 classes
            var Elsst15 = document.getElementsByClassName("st15");
            var Elsst16 = document.getElementsByClassName("st16");

            //si notre souris passe par la class st15 ou st16 
                //alors on active hoverActive à l'élement parent
                event.target.parentElement = this.active = !this.active;   
        }
    }
});

Mais là j'ai un vide 

• //si notre souris passe par la class st15 ou st16  

-
Edité par Cielphis 15 février 2019 à 14:31:58