Как при наведении курсора на один из элементов SVG добиться, чтобы он поднялся выше других элементов

#javascript #css #css3 #html5 #svg

Вопрос инспирирован - Как вывести всплывающую подсказку при наведении курсора на
регион карты?  

Необходимо, чтобы при наведении курсора на один из регионов карты он увеличивался
в размере и был выше других элементов. 

Известно, что к сожалению в SVG нет Z-index, в отличии от CSS. 
Позиционирование по вертикали идет по принципу, - какой элемент в коде написан последним,
тот и выше. 

Ниже пример демонстрирующий эту проблему:  






   


    

  





Как решить эту задачу? Устроит любое решение из набора меток в вопросе.  
    

Ответы

Ответ 1

Необходимо поменять порядок элементов в DOM-документе.

Берем родителя пути, на который наведена мышь и добавляем его после последнего элемента
его родителя.



На нативном js:



document.querySelectorAll('path.state').forEach(path => {
  path.addEventListener('mouseover', e => {
    path.parentNode.parentNode.append(path.parentNode);
  });
});



  


    

  







На d3.js 



d3.selectAll('path').on('mouseover', function() {
  d3.select(this.parentNode).raise();
})




  


    

  



Ответ 2

Использовал идею ответа @Stranger in the Q - добавляем svg path под наведенным курсором
в DOM последним, что обеспечивает его положение сверху остальных элементов SVG.

Ниже полный код:



var svg = document.querySelector("svg");
var paths = document.querySelectorAll("path.state");

var i = paths.length;
while(i--) {
  paths[i].addEventListener("mouseover", function(e) {
    svg.appendChild(e.target);
  });
} 
.state {
fill:white;
stroke:dodgerblue;
transform-origin: center center;
transform-box: fill-box;
transition:  1s;
}

:hover.state {
 fill:blue;
 stroke:white;
 stroke-width:4px;
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 
 }