带悬停的 SVG 变换和过渡叠加 [英] SVG transform and transition overlay with hover

查看：49 发布时间：2021/6/13 19:35:46 svg overlay transform

本文介绍了带悬停的 SVG 变换和过渡叠加的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要将这个 svg 地图的每个部分都悬停在另一个部分上.我的意思是当我在这条路径的每条路径上使用鼠标时，它会在所有其他路径上进行转换和叠加.

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

jsfiddle

解决方案

z-index 是一个 HTML 属性.它不适用于 SVG.元素的顺序完全由它们在文件中的位置决定.

您需要使用 javascript 将路径(您悬停在上方)移动到顶部.

var mysvg = document.getElementById("Livello_1");var region = mysvg.getElementsByTagName(路径");for (var i = 0; i

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

请注意，我也对 SVG 进行了一些更改.我将路径全部放在一组中，因此它们具有相同的父级.那就是让 appendChild() 工作.

I need each part of this svg map going on another one with hover. I mean when i going with mouse on each path of this , it's transform with transition and overlay on all of the other path.



now each path going under another path. i use z index and position relative and absolote in css but it's not working.
please help me , thanks 
        <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
 解决方案 
z-index is an HTML property. It does not work in SVGs.  The order of elements is determined solely by their position in the file.
You will need to use javascript to move the path (you are hovering over) to the top.
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/
Note that I've changed the SVG a little also.  I put the paths all in one group so they have the same parent.  That is to make the appendChild() work.

                        这篇关于带悬停的 SVG 变换和过渡叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

带悬停的 SVG 变换和过渡叠加 [英] SVG transform and transition overlay with hover

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

带悬停的 SVG 变换和过渡叠加 [英] SVG transform and transition overlay with hover

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭