SVG變換和懸停過渡覆蓋

我需要這個svg地圖的每個部分都與另一個懸停。我的意思是，當我用鼠標在這條路的每條路徑上進行轉換時，它會轉換並覆蓋其他所有路徑。SVG變換和懸停過渡覆蓋

現在每條路徑都在另一條路徑下。我使用z索引和相對位置，絕對在CSS中，但它不工作。請幫幫我，謝謝

 <div class="map" id ="centermap"> 
     <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 -21.6 761 919" style="enable-background:new 0 -21.6 761 919;" xml:space="preserve"> 
     <g > 
     <path class="st0" d="M208.4,244.3l-10.5,24.9l7.2,11.1l2.1,3.8l5.8,9.9l2.6,8l-4.8,13.4l7.2,20.3l-1,6.3l-1.6,6.2l3.7,11.8l7.5,12.2 
l9.6,14.3l2.5,10.2l0,4.4l-10.9,0.7c-10,1.8-29.5,3.3-31.3,1.5c-0.2,0.7-6.4-1-6.2-1.7l-12.8-6.6l-5.9,1l-6.2-0.4l-7.6-2.6 
l-12.5-5.9l-15.7-7.2l-35-19.9L77,353.7l-12.2-1.3l-15.1,2.1l-18.2,2l-8.3-1.3l-9.2-5.2l-6.8-6.7l-4.1-8.5V299h3.9l3.3,1.3l4.1,2.2 
l6.2,4.3l3.3,3l4.2,1.3l4.3-1.3l4.3-2.8l7.7-0.9l10.2,0.3l1.7,0.4l3.1,3l0.8,1.3l1.3,1.2l2,1h4.2h4.6h2.9l5.4-1.6l6.8-3.3l8.5-6.3 
l5.6-5l3.8-1.6l5-0.9h4.2l3.9,0.9l2.6,1l3,2.5l3.5,1.4l5.4,0.9l6.6,0.4h13.4l8.9-1.3l4.9-1.7l5.5-0.9l7.9-0.7l9.2-2.6l4.6-5.4 
l-1.3-6.8l-4.2-8.1l2.6-10.6l-0.9-6.6l-1.3-4.6l0.7-3.8l3.5-2.8l5.2-1.6l4.2-4.6l1.7-5.2v-7.5l2-3.3l3.3-1.4h3.6l-0.9,2.8v3.1 
l-1,9.2L208.4,244.3"/>  
      </g> 
     <g id="sar"> 
<path class="st0 " d="M239.7,401.4h-6.8l-10.5,0.9l-15.1,0.9h-10.6l-5.5-0.9l-5.6-2.8l-4.5-2.2l-4.7-2.4l-6.9,0.9l-5.1-0.3l-6.2-2.2 
l-31.6-14.7l-33-18.8l-15.6-5.6l-14-2l-19,2.6l-14.3,1.4l-4.7-0.7l12.1,6.2l9.4,7.2l23.5,23.3l14.3,10.8l21.6,9.3l14.3,5.8 
l23.3,13.2l31.2,15.7l14,5.8l10.5,3.8l11.8,2l12.3,4.2h4.6l2.6-8.3l5.6-12.2l3.8-7.5C244,435,242.8,401.3,239.7,401.4z"/> 
</g> 
     <g id="sar"> 
     <path class="st0 " d="M214.2,250.2c0.3,0.2-7.6,17.5-7.4,17.6c0.6,3.9,1.1,7.9,4.9,9.8c2.8,1.4,6.2,1.9,9.3,2.3 
c5.1,0.7,10.3,1,15.4,1.2c0.3-1.5,0.6-3.1,1-4.6c0.2-0.9,0.6-2.2,1.5-2.6c1-0.4,1.4,1.4,1.7,2c0.7,1.5,1.5,2.7,3,3.3 
c0.6,0.2,2.3,0.9,2.7,0.2c0.4-0.6,0.8-1.3,1.1-1.9c0.7-1.2,1.4-2.3,2.1-3.5l2.7-4.4c3.4-0.6,4,4,5,6.3c0.5,1.1,0.8,2.4,1.9,3 
c0.7,0.3,1.4,0.7,2.1,1l6.7,1.2l5.1,1.1l6.7-5.2l6.6-3.2c2.3-4.2,4.7-8.4,7-12.5c0.3-0.6,1.5-0.9,2.1-0.8c0.7,0,1.2,0.6,1.3,1.2 
c0.4,1.7,0.3,3.8,0.1,5.5c-0.2,1.8-0.5,3.6-0.7,5.4c0,4.1-2.4,8.9-2.4,13.1c1,0.2-1.2,18.2-2.2,18l-2,18.4 
c-1.4,6.2-2.9,12.6-3.6,18.9c-0.7,6.2,1.2,12.2,1.5,18.3c0,0.2,2.1,25.5,0.9,25.6l1.1,14.7l-0.3,9.8l1,10.2l-1.1,4.3 
c0,0-43.7,6.6-46.1,3.4c-2.4-3.3-4.9-32.7-6.8-40.9c-9.5-11.4-15.4-22.7-19.3-34.1l-1.7-6.8l2.2-5.5l-1.4-10l-3.7-11l-1.6-5l1.9-5.1 
c0.5-1.3,1-2.5,1.4-3.8c0-1.7,1-3.2,1.2-4.8c0.3-1.8-0.6-3.9-1.3-5.5c-0.8-2.1-1.5-4.2-2.9-6c-1.9-2.6-3.8-5.3-5.8-7.9l-3.5-4.9 
c0,0-5-5.1-3.8-8.7c0.5,0.3,13.8-29.6,13.2-29.9c0-8.1,1.9-14.8,2.2-14.8c1.4,0,4.8-0.1,5.9,1.4c0.5,0.7,1.3,9.1,0.9,13 
C220,238.1,215.5,246.3,214.2,250.2z"/> 
</g> 
     <g id="sar"> 
     <path class="st0" d="M229.6,463.7c0-1,0-2,0-3c0-0.5-0.1-1.1,0-1.6c0.2-1,0.7-1.9,1.1-2.8c1-2.2,2.1-4.5,3.1-6.7 
c1.6-3.5,3.2-7,4.8-10.5c0.9-1.8,1.9-3.6,2.6-5.5c0.8-2.1,1.6-4.2,2.3-6.4c4,0.6,8,1.1,12.1,0.8c4.7-0.4,9.4-0.8,14.1-1.4 
c5.6-0.7,11.1-1.7,16.7-2.7l7.6-0.8c0,0,18.1-0.8,18.1-0.7c-0.2,4.1-0.3,8.3-0.7,12.4c-0.3,2.6-0.6,5.2-0.9,7.8 
c-0.3,2.3-0.2,4.7-0.3,7c-0.2,4.4,0.4,8.8,0.7,13.2c0,0.6-0.2,1.3-0.3,1.9c-0.3,1.5-0.6,3.1-0.9,4.6c-0.1,0.6-0.1,1.5-0.5,2.1 
c-0.7,1.2-1.3,2.3-2,3.5c-0.3,0.5-0.8,2.1-1.4,2.2c-1.2,0.2-2.5,0.4-3.7,0.6c-0.5,0.1-1,0.2-1.5,0.3c-0.4,0.1-1.1,0.3-1.5,0.3 
c-0.7-0.1-1.4-0.2-2.1-0.3c-3-0.5-6.1-0.9-9.1-1.4c-1.3-0.2-2.7-0.4-4-0.7c-2.8-0.8-5.6-1.6-8.4-2.5c-3.8-1.1-7.7-2.2-11.6-3.3 
c-4-1.1-8-2.3-12-3.1c-4.1-0.8-8.1-1.7-12.2-2.5c-1.7-0.3-3.5-0.3-5.1-0.5C232.9,463.9,231.2,463.9,229.6,463.7z"/> 
     </g> 
     <g id="sar"> 
     <path class="st0" d="M302.3,479.4c2.5,9.4,4.9,18.8,7.4,28.3c1.1,4.1,2.1,8.2,3.2,12.2c0.2,0.7-0.8,1.1-1.2,1.6 
c-1.9,1.7-3.8,3.5-5.6,5.2c-4.3,3.9-8.5,7.8-12.8,11.8c-0.4,0.4-0.8,0.7-1.2,1.1c-0.5,0.5-0.8,1.7-1,2.3c-0.4,0.9-0.6,1.6-1.3,2.3 
c-1.1,1-2.1,2-3.2,3c-1.2,1.2-2.8,2-4.2,2.9c-2.5,1.7-5,3.3-7.5,5c-1.2,0.8-2,1.6-3.1,2.6c-2.2,2.1-4.3,4.3-6.5,6.4 
c-1,1-1.7,2-2.6,3.2c-1.7,2.5-3.5,5-5.2,7.5c-2.5,3.6-5.5,6.8-8.3,10.1c-1.2,1.4-2.8,2.5-4.2,3.7c-1.5,1.3-3.1,2.6-4.5,3.9 
c-0.7,0.6-2,2.1-3.1,1.9c-0.9-0.2-0.6-3.1-0.6-3.7c-0.2-3-0.4-6.1-0.7-9.1c-0.1-1.5-0.1-3-0.2-4.5c-0.2-4-0.4-8-0.6-12 
c-0.6-12.2-1.1-24.4-1.7-36.6c-0.6-12.1-1.1-24.3-1.7-36.5c-0.2-3.9-0.4-7.9-0.5-11.8c0-1.1-0.1-2.1-0.1-3.2c0-0.3,0-0.8-0.1-1.1 
c-0.9-2.6-1.7-5.2-2.6-7.9c-0.3-1-0.7-2-1-3c-0.1-0.3-0.6-0.6-0.8-0.8c-0.4-0.4-0.9-0.9-1.3-1.3c4.9,0.6,9.8,1.2,14.7,1.8 
c4.3,0.5,8.5,1.6,12.7,2.4c7.2,1.5,14.4,3.5,21.6,5.3C283.8,474.9,293.1,477.1,302.3,479.4z"/> 
</g> 
     </svg> 
     </div>

jsfiddle

來源

2015-07-12 kaveh

z-index是一種HTML屬性。它在SVG中不起作用。元素的順序完全取決於它們在文件中的位置。

您將需要使用javascript將路徑（您正在盤旋）移動到頂部。

var mysvg = document.getElementById("Livello_1"); 

var regions = mysvg.getElementsByTagName("path"); 
for (var i = 0; i < regions.length; i++) { 
    regions[i].addEventListener("mouseover", function(evt) { 
     // Move the path to the top 
     evt.target.parentNode.appendChild(evt.target); 
     evt.target.classList.add("regionhover"); 
    }); 
    regions[i].addEventListener("mouseout", function(evt) { 
     // Remove the class from all the regions 
     evt.target.classList.remove("regionhover"); 
    }); 
}

https://jsfiddle.net/wwLfo49n/2/

請注意，我已經改變了SVG也有點。我將所有路徑放在一個組中，以便它們具有相同的父項。那就是讓appendChild()工作。

來源

2015-07-12 15:29:47

SVG變換和懸停過渡覆蓋

回答

相關問題