les éléments svg se réinitialisent lors du masquage/affichage dans chrome

Question

J'ai 3 SVG <object> éléments représentant 3 étages différents d'un bâtiment. En bas, j'ai 3 boutons pour naviguer entre eux qui font un simple hide() y show() .

Lorsque je charge la page, un script met en place des éléments interactifs dans le svg, mais lorsque je passe d'un étage à l'autre avec les boutons de navigation, les éléments interactifs du svg se réinitialisent et perdent leur fonctionnalité.

éléments interactifs

Comment puis-je empêcher cela ? Le script semble fonctionner sur firefox.

Voici le code qui cache/affiche les étages.

function showMap(mapId){
  var map = (typeof(mapId)=="string")? $('#'+mapId) : $(mapId);
  if(!map.is(':visible')){
    maps.hide(); // hides all svg objects
    map.show();  // display the selected one
  }
}

Answer 1

Oui, c'est une "fonctionnalité" de Chrome. "display : none" (y compris la manière css) ruine complètement toutes les interactions avec le SVG. Utilisez plutôt la taille ou la position :

jQuery.fn.weirdHide = function() {
    $(this).css("width", 0)
        .css("height", 0)
        .css("position", "absolute")
        .css("left", "-9999px");
}

jQuery.fn.weirdShow = function() {
    $(this).css("width", "")
        .css("height", "")
        .css("position", "")
        .css("left", "");
}

$("#map").weirdHide();
$("#map").weirdShow();

Answer 2

J'ai constaté que c'est seulement le premier SVG dans le DOM qui perturbe les choses, donc ce que j'ai fait, c'est de prépendre un SVG de taille zéro, alors je pouvais utiliser hide/show sans problèmes.