SVG 变换和过渡叠加悬停

Question

我需要这张 svg 地图的每个部分都悬停在另一个地图上。我的意思是，当我在每条路径上使用鼠标时，它会随着过渡进行转换并覆盖在所有其他路径上。

现在每条路径都在另一条路径下。我在 css 中使用 z 索引和相对位置和绝对位置，但它不起作用。请帮助我，谢谢

        <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

Answer 1

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 hover class from the region
        evt.target.classList.remove("regionhover");
    });
}

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

请注意，我也稍微更改了 SVG。我将所有路径放在一组中，以便它们具有相同的父级。那就是让 appendChild() 工作。

SVG 变换和过渡叠加悬停

SVG transform and transition overlay with hover

svg

overlay

transform