分类导航
程序笔记程序问答

SVG重叠中的缩放路径

程序问答   发布时间：2022-06-02  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了SVG重叠中的缩放路径，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决SVG重叠中的缩放路径？

开发过程中遇到SVG重叠中的缩放路径的问题如何解决？下面主要结合日常开发的经验，给出你关于SVG重叠中的缩放路径的解决方法建议，希望对你解决SVG重叠中的缩放路径有所启发或帮助；

我正在尝试仅使用 CSS 创建响应式地图，但是当路径在悬停时缩放时它们重叠时，是否可以在悬停时将其放置在顶部？

我已经读到 svg 中的 z.indexing 没有用，但我想知道这种方法是否有更好的方法，

div {
    wIDth: 500px;
}

.mapdiv path {
    fill: rgb(96,84,84);
    fill-rule: evenodd;
    stroke: rgb(255,255,255);
    stroke-wIDth: 0.75;
    stroke-miterlimit: 4;
    stroke-opacity: 1;
    stroke-dasharray: none;
    display: inline;
    transform: scale(1);
    transform-origin: 50% 50%;
    Transition: 0.3s;
    transform-Box: fill-Box;
}

path:hover {
    fill: rgb(96,100);
    transform: scale(2);
    z-index: 3;
}
<div class="mapdiv">
    <svg wIDth="100%" vIEwBox="500 300 1000 650" ID="svg2" version="1.0" xmlns="http://www.w3.org/2000/svg">
        <g ID="layer4">
            <g ID="Mexico">
                <path class="uno" d="M821.9 501c-1 .8-1.7 1-2.7 1.8-1 .9-1.2 1.1-2.6 1.2a12 12 0 00-4.2 1.6c-.6.3-.9 1-1 1.6-.4 1 7-1.2 7.4-1.6 1.2-1 2.6-.7 3.7-2 .3-.4.5-1.8-.6-2.6zm-18-44.4c-.1-.3 0-.7-.3-1h-.4s0-.3-.2-.2l-.2.2v.6c0 .1-.3 0-.4.4 0 .2.1.7 0 .8-.1.4-.9 0-.6.6.2.3.5.3.6.5.2.1-.1.2.4.2.2 0 .1-.2.2-.2.3-.1.9 0 .9-.2v-.3h.2c.1 0 .2-.3-.2-1.4zM791.5 433l.6-1c.2-.4-.3-.3-.4-.3h-1c-.6 0 .2-.6-.2-.4l-.4.6v.6c0 .2 0 .3.2.3h.2c.2 0-.2.2.4.2h.6zm102.6 97v-52.4l-15.3-16.8-.6-10.1-2.4.6-1.5 2-2.7-3.2H870l-.6-5.7-10.5.6v-4.2l-3.9-.3h-2.4l-.6-10.5-2-.1a56.9 56.9 0 00-2.5 17.5c0 2.8 3.3 6.3 3 10.8-.1 2.3-3.4 7.9-4.4 10.3-3.4 7.8-.1 12.6-6.6 17.8-3.6 3-11.6 12.5-16 12.9.5 1.2.2 1.6 1.2 1.6s1.8-.5 2.4-.5c.5 0 .5 1.3.7 1.7.6 1 5 .7 6 .7-2.4 0-6.5 0-4.6 4h2.1c1.8 0-2.2.4-2.6.4-.9.1-1.9 3.8-3.7 3-4.4-1.7-2.4 4.6-6.3 4-.5 0-1.8-1.3-2.9-.7-1 .7-.7 3.3-1.6 3.3h-2.8c-1.7 0-1.3.2-1.4-1.4 0-.8-.4-.6 1-.7 0 0 1.5.2 1.1-.4-.4-.6-1-.9-1-1.7 0-2.3-1 .8-1.8-.5-1.6-2.4-2.1 1-3.8 0-.7-.4 0 0-1.1-.4-.3-.1-1-1.2-1.2-1.2-1.3-.1-1.1.5-1.6 1.2-.5 0-2.5.5-3 .2-.9-.3-1.2-.5-.3-.7.4-.1 1.2 0 1.6 0 .5 0 1.4.3 1.2-.5-.2-.5-.4-.8-.5-1.4 0-.5 0-.5.3-.7 1.7 0 3.3 0 4.9.5.7.3 1.4-.7 2.5-.7.6 0 1.3-.6.7-1.2-.5-.5-3.3-.4-4.2-1.1-1.7-1.4-4.6.6-6 1.4-1 .5-3.5 0-4.7.4-1.5.5-2.6.3-3.6.6v1.4l2.8.7v3l1.7-.3.4 1.2c0 .4 1.6.2 2 .2h.6c.4 0 1.5-1 1.6-.4.2 1 .6 0 1.3.4.2.2-.3.2.4.2h1v7.5c1.4.2.8 3.9 1.8 3.9s1.5.1 2-.4 3.4 1.6 4 1.8c.4.1 1.6-.1 2 .2.6 1-1 1.8.7 1.8.9 0 3.6 0 4 .7 1 1 2.3 1.2 4 1.2v-7.6h3c1.3 0 2.2 1 3.6 1.5 2.4.7 2.5-.8 4.7 1 1.9 1.5 6.1-.4 8.5 1.7v4.3c18.8 0 34.8-1 53.4-2.4z" ID="CAM"/>
                <path d="M745.7 598l-.2-2.3c0-1.4.7-1.2.7-2.3 0-1.7-.4-1.5 1.3-1.6.6 0 .3-1.9.3-2.6V586c0-2-1.9-2.1-4.2-2.3l7.1-21.9c.8-.3 1.6-.3 2-.8.5-.5-.6-1.4.3-2.3.9-.8 3.2 0 3.6-1l.2-1c.9-1.8 2.4 1.2 2.7-2.6 0-1.4 1.3-.9 1.6-1.5a26 26 0 001.2-4c.3-1.5.6-.8 1.2-1.5.9-.8-.3-1.4 1-2.4.4-.3 1-.5 1.3-1 1.1-1.3 1-3.2-1.2-3.2l-.2-3.2 1-3.7c1.4-.6 1.4.4 1.8-.7.2-.4.8-.2 1-.3.5-.3 1.1-.1 1.8-.2.4 0 0-.7.7-.7.6 0 2.4.8 1.2 1.4-.2.1-1-.3-.7.3.4 1 .5.3 1 1 .3 0 .5.8.6.8.5 0 1-.4 1.6-.4.8 0 .5.7.5 1.4 0 .6.4.9 0 1.4-.4.7 1.4.7 1.6.8v6.3c.5 0 1.4.7 1.4 1.2 0 1.4-.4 1.6 1.2 1.6l2.5-.2c2.4 0 .9 0 2 1.2.1.2.4.1.3.4-.2.3-1.3 2.2-.2 1.9.3 0 1.5-.1 1.6.2 0 .7-.9.7-.4 1 1.2.7.7.7 2.3.7.1-.3.4 0 .5-.5.1-.3.3-.6.2-1 0-.5-.1 0-.2-.4 0-.6.6-1.7 1-2 .3 0 .5 0 .6-.3.2-.3 0-1.8.2-2.3.6 0 2.6 0 2.6-.7 0-1.2.6-1 1.6-1.4 2-.7 3.4.4 4.4-2 .6-1.5-1-2.3 1.4-2.3.8 0-1 .8.2-.6.4-.6 1.5-.6 1.9-1 .8-1 3.1-1.7 3.1-2.7 0-1 0-.9 1.1-1.2.8-.2 1.8 0 1.8-1.2 0-1.4.8-3.8 1.5-1.4.2.6.6 0 .6 1 0 1.5 1.1 1 1.2.4 0-1 0-.7 1-.7s1.2.4 2.1.7c.4.1 1 .2 1.1.5.2.7 0 1.2.3 1.8.5.6 0 1-.1 1.7.3.3.3.7.5.7.5 0 .5 0 .9.4.9.7.4.3 1.4.2 1.3-.2.8 0 1 1 .2 1 .6-.5.6.9 0 1.3 1 .2 1.2 1.4 0 .8-.9 1.3-.4 2 .3.2.3 1 0 1.1-.5.5-1.2.5-.5 1 .2 0 .2.6.2 1-.6.2 0 .8.7.5.4-.2.7-.4 1.6-.4 1.3 0 .9 1 1.7 1 .4 0 2.2-.3 2.3 0 0 .7.3 2.5 1 1 .5-.9.4-.7.8-.4.2.3.8.2.8.7 0 1.3-.7.5-.7 1.8 0 .5-.2 1.3-.1 1.6 0 .5 1.3-.2 1.7.4h-1c.5.8.6 1 1.3 1.3l.3.1c.7.3.1.4.5 1 .3.4.6.7 1 .7s1 0 1.1.2c.3.2 1 .2 1 .8.2.6.1.9.7 1.1 1 .4 1.6-.2 1.6 1 0 1.3 1.2.8 1.3 2.2 0 .6 4.2-.7 3.2.8-.3.4-.5-.2-.4.7 0 .8 1 2.1 1.6 2.1.7 0 1.1-.4 1.9-.4 0 2.4.5 2 2.6 2 2.7 0 6.1 2.8 6.3 5.2 0 .7.8 2.7 1.2 2.8 2 .4 1.3 3.9 3.6 3.2 1.4-.4 1.8-.9 3 .4l1 1c.3.1 1.2-.3 1.7-.3v1.7c0 1-1 .1-1 1-.2 1.1-1.2 1.8-1 3 .3 1 .7 5.3 1.5 5.6l-40.6 1.8-15.2 29.7 4.7 3.9c0 4.3-2 6.9-2 11 0 1.9-.6 2.6-.6 4.4 0 2-1 2.7-1.8 3.7a70 70 0 01-8.1-7.4c-7.5-10.8-20.1-16.9-30-26.1-4.6-4.3-12.8-6.6-17.8-10.9a13.8 13.8 0 00-6-2.3z" ID="CHP"/>
                <path d="M740.8 526.8l1.3 2.3.2 3.3c0 1.6.5.6 1 1.6.2.4-1.5 2.2-.5 3.5.3.4 2.6-.2 3 0 1.6 1-.8 1.5 2.1 2.6 1.3 1 1.6 2.7 3.3 2.8 1.6 0 4 1 3.6 2.5-.5 1.8 2 1.6 2.3 2.3 0 .1.5 4.5-.3 4.9-1.3.7 0 2.2 0 4 .9-1.7 2.4 1.3 2.7-2.5 0-1.4 1.3-.9 1.6-1.5a26 26 0 001.2-4c.3-1.5.6-.8 1.2-1.5.9-.8-.3-1.4 1-2.4.4-.3 1-.5 1.3-1 1.1-1.3 1-3.2-1.2-3.2l-.2-3.2 1-3.7c1.4-.6 1.4.4 1.8-.7.2-.4.8-.2 1-.3.5-.3 1.1-.1 1.8-.2.4 0 0-.7.7-.7.6 0 2.4.8 1.2 1.4-.2.1-1-.3-.7.3.4 1 .5.3 1 1 .3 0 .5.8.6.8.5 0 1-.4 1.6-.4.8 0 .5.7.5 1.4 0 .6.4.9 0 1.4-.4.7 1.4.7 1.6.8v6.3c.5 0 1.4.7 1.4 1.2 0 1.4-.4 1.6 1.2 1.6l2.5-.2c2.4 0 .9 0 2 1.2.1.2.4.1.3.4-.2.3-1.3 2.2-.2 1.9.3 0 1.5-.1 1.6.2 0 .7-.9.7-.4 1 1.2.7.7.7 2.3.7.1-.3.4 0 .5-.5.1-.3.3-.6.2-1 0-.5-.1 0-.2-.4 0-.6.6-1.7 1-2 .3 0 .5 0 .6-.3.2-.3 0-1.8.2-2.3.6 0 2.6 0 2.6-.7 0-1.2.6-1 1.6-1.4 2-.7 3.4.4 4.4-2 .6-1.5-1-2.3 1.4-2.3.8 0-1 .8.2-.6.4-.6 1.5-.6 1.9-1 .8-1 3.1-1.7 3.1-2.7 0-1 0-.9 1.1-1.2.8-.2 1.8 0 1.8-1.2 0-1.4.8-3.8 1.5-1.4.2.6.6 0 .6 1 0 1.5 1.1 1 1.2.4 0-1 0-.7 1-.7s1.2.4 2.1.7c.4.1 1 .2 1.1.5.2.7 0 1.2.3 1.8.5.6 0 1-.1 1.7.3.3.3.7.5.7.5 0 .5 0 .9.4.9.7.4.3 1.4.2 1.3-.2.8 0 1 1 .2 1 .6-.5.6.9 0 1.3 1 .2 1.2 1.4 0 .8-.9 1.3-.4 2 .3.2.3 1 0 1.1-.5.5-1.2.5-.5 1 .2 0 .2.6.2 1-.6.2 0 .8.7.5.4-.2.7-.4 1.6-.4 1.3 0 .9 1 1.7 1 .4 0 2.2-.3 2.3 0 0 .7.3 2.5 1 1 .5-.9.4-.7.8-.4.2.3.8.2.8.7 0 1.3-.7.5-.7 1.8 0 .5-.2 1.3-.1 1.6 0 .5 1.3-.2 1.7.4l11-.2-.2-7-.1-17.7c-2.4-2-6.6-.2-8.5-1.7-2.2-1.8-2.3-.3-4.7-1-1.4-.4-2.3-1.4-3.6-1.4h-3v7.5c-1.7 0-3-.1-4-1.2-.4-.7-3.1-.7-4-.7-1.8 0 0-.9-.8-1.8-.3-.3-1.5 0-1.8-.2-.7-.2-3.6-2.3-4-1.8-.6.5-1 .4-2.1.4-1 0-.4-3.7-1.8-3.9v-7.5h-1c-.7 0-.2 0-.4-.2-.7-.3-1 .6-1.3-.4 0-.6-1.2.4-1.6.4h-.6c-.4 0-2 .2-2-.2l-.4-1.2-1.7.2v-2.9l-2.8-.7v-1.4c-.4.1-.9.4-1.4.8-1.8.7-3.1 1.3-4.6 2.1-1.1.6-1.9.5-2.9 1.4-2 2.1-5 4.6-8 4.7-.8 0-1.4.2-1.3 1.2 0 1.2-.9 4-2.6 2.8-2-1.4 2.3-2.8 1.2-2.8-.9 0-2.3.3-2.4.2-.6-.6-2.5-.7-3.7-.7-2.2 0-6 0-7 1.2-3.5 3.6-10.5 2-13 5.9l-2.3.7c-.7.2-1.3.5-1.8.9z" ID="TAB"/>
            </g>
            <g ID="g6310" transform="matrix(1.25,-1.25,1636.39,215.04306)"/>
        </g>
    </svg>
</div>

解决方法

SVG 中没有 z-index，您需要更改 <path> 内 <svg> 元素的内部顺序。你可以用 D3 raise() 函数来做到：

 d3.SELEctAll('path')
   .on('mouseenter',e => d3.SELEct(e.target).raise());


d3.SELEctAll('path').on('mouseenter',(E) => d3.SELEct(e.target).attr('fill','red').raise());
div {
    width: 500px;
}

.mapdiv path {
    fill: rgb(96,84,84);
    fill-rule: evenodd;
    stroke: rgb(255,255,255);
    stroke-width: 0.75;
    stroke-miterlimit: 4;
    stroke-opacity: 1;
    stroke-dasharray: none;
    display: inline;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: 0.3s;
    transform-box: fill-box;
}

path:hover {
    fill: rgb(96,100);
    transform: scale(2);
    z-index: 3;
}
<script src="https://cdnjs.cloudFlare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

<div class="mapdiv">
    <svg width="100%" viewBox="500 300 1000 650" id="svg2" version="1.0" xmlns="http://www.w3.org/2000/svg">
        <g id="layer4">
            <g id="Mexico">
                <path class="uno" d="M821.9 501c-1 .8-1.7 1-2.7 1.8-1 .9-1.2 1.1-2.6 1.2a12 12 0 00-4.2 1.6c-.6.3-.9 1-1 1.6-.4 1 7-1.2 7.4-1.6 1.2-1 2.6-.7 3.7-2 .3-.4.5-1.8-.6-2.6zm-18-44.4c-.1-.3 0-.7-.3-1h-.4s0-.3-.2-.2l-.2.2v.6c0 .1-.3 0-.4.4 0 .2.1.7 0 .8-.1.4-.9 0-.6.6.2.3.5.3.6.5.2.1-.1.2.4.2.2 0 .1-.2.2-.2.3-.1.9 0 .9-.2v-.3h.2c.1 0 .2-.3-.2-1.4zM791.5 433l.6-1c.2-.4-.3-.3-.4-.3h-1c-.6 0 .2-.6-.2-.4l-.4.6v.6c0 .2 0 .3.2.3h.2c.2 0-.2.2.4.2h.6zm102.6 97v-52.4l-15.3-16.8-.6-10.1-2.4.6-1.5 2-2.7-3.2H870l-.6-5.7-10.5.6v-4.2l-3.9-.3h-2.4l-.6-10.5-2-.1a56.9 56.9 0 00-2.5 17.5c0 2.8 3.3 6.3 3 10.8-.1 2.3-3.4 7.9-4.4 10.3-3.4 7.8-.1 12.6-6.6 17.8-3.6 3-11.6 12.5-16 12.9.5 1.2.2 1.6 1.2 1.6s1.8-.5 2.4-.5c.5 0 .5 1.3.7 1.7.6 1 5 .7 6 .7-2.4 0-6.5 0-4.6 4h2.1c1.8 0-2.2.4-2.6.4-.9.1-1.9 3.8-3.7 3-4.4-1.7-2.4 4.6-6.3 4-.5 0-1.8-1.3-2.9-.7-1 .7-.7 3.3-1.6 3.3h-2.8c-1.7 0-1.3.2-1.4-1.4 0-.8-.4-.6 1-.7 0 0 1.5.2 1.1-.4-.4-.6-1-.9-1-1.7 0-2.3-1 .8-1.8-.5-1.6-2.4-2.1 1-3.8 0-.7-.4 0 0-1.1-.4-.3-.1-1-1.2-1.2-1.2-1.3-.1-1.1.5-1.6 1.2-.5 0-2.5.5-3 .2-.9-.3-1.2-.5-.3-.7.4-.1 1.2 0 1.6 0 .5 0 1.4.3 1.2-.5-.2-.5-.4-.8-.5-1.4 0-.5 0-.5.3-.7 1.7 0 3.3 0 4.9.5.7.3 1.4-.7 2.5-.7.6 0 1.3-.6.7-1.2-.5-.5-3.3-.4-4.2-1.1-1.7-1.4-4.6.6-6 1.4-1 .5-3.5 0-4.7.4-1.5.5-2.6.3-3.6.6v1.4l2.8.7v3l1.7-.3.4 1.2c0 .4 1.6.2 2 .2h.6c.4 0 1.5-1 1.6-.4.2 1 .6 0 1.3.4.2.2-.3.2.4.2h1v7.5c1.4.2.8 3.9 1.8 3.9s1.5.1 2-.4 3.4 1.6 4 1.8c.4.1 1.6-.1 2 .2.6 1-1 1.8.7 1.8.9 0 3.6 0 4 .7 1 1 2.3 1.2 4 1.2v-7.6h3c1.3 0 2.2 1 3.6 1.5 2.4.7 2.5-.8 4.7 1 1.9 1.5 6.1-.4 8.5 1.7v4.3c18.8 0 34.8-1 53.4-2.4z" id="CAM"/>
                <path d="M745.7 598l-.2-2.3c0-1.4.7-1.2.7-2.3 0-1.7-.4-1.5 1.3-1.6.6 0 .3-1.9.3-2.6V586c0-2-1.9-2.1-4.2-2.3l7.1-21.9c.8-.3 1.6-.3 2-.8.5-.5-.6-1.4.3-2.3.9-.8 3.2 0 3.6-1l.2-1c.9-1.8 2.4 1.2 2.7-2.6 0-1.4 1.3-.9 1.6-1.5a26 26 0 001.2-4c.3-1.5.6-.8 1.2-1.5.9-.8-.3-1.4 1-2.4.4-.3 1-.5 1.3-1 1.1-1.3 1-3.2-1.2-3.2l-.2-3.2 1-3.7c1.4-.6 1.4.4 1.8-.7.2-.4.8-.2 1-.3.5-.3 1.1-.1 1.8-.2.4 0 0-.7.7-.7.6 0 2.4.8 1.2 1.4-.2.1-1-.3-.7.3.4 1 .5.3 1 1 .3 0 .5.8.6.8.5 0 1-.4 1.6-.4.8 0 .5.7.5 1.4 0 .6.4.9 0 1.4-.4.7 1.4.7 1.6.8v6.3c.5 0 1.4.7 1.4 1.2 0 1.4-.4 1.6 1.2 1.6l2.5-.2c2.4 0 .9 0 2 1.2.1.2.4.1.3.4-.2.3-1.3 2.2-.2 1.9.3 0 1.5-.1 1.6.2 0 .7-.9.7-.4 1 1.2.7.7.7 2.3.7.1-.3.4 0 .5-.5.1-.3.3-.6.2-1 0-.5-.1 0-.2-.4 0-.6.6-1.7 1-2 .3 0 .5 0 .6-.3.2-.3 0-1.8.2-2.3.6 0 2.6 0 2.6-.7 0-1.2.6-1 1.6-1.4 2-.7 3.4.4 4.4-2 .6-1.5-1-2.3 1.4-2.3.8 0-1 .8.2-.6.4-.6 1.5-.6 1.9-1 .8-1 3.1-1.7 3.1-2.7 0-1 0-.9 1.1-1.2.8-.2 1.8 0 1.8-1.2 0-1.4.8-3.8 1.5-1.4.2.6.6 0 .6 1 0 1.5 1.1 1 1.2.4 0-1 0-.7 1-.7s1.2.4 2.1.7c.4.1 1 .2 1.1.5.2.7 0 1.2.3 1.8.5.6 0 1-.1 1.7.3.3.3.7.5.7.5 0 .5 0 .9.4.9.7.4.3 1.4.2 1.3-.2.8 0 1 1 .2 1 .6-.5.6.9 0 1.3 1 .2 1.2 1.4 0 .8-.9 1.3-.4 2 .3.2.3 1 0 1.1-.5.5-1.2.5-.5 1 .2 0 .2.6.2 1-.6.2 0 .8.7.5.4-.2.7-.4 1.6-.4 1.3 0 .9 1 1.7 1 .4 0 2.2-.3 2.3 0 0 .7.3 2.5 1 1 .5-.9.4-.7.8-.4.2.3.8.2.8.7 0 1.3-.7.5-.7 1.8 0 .5-.2 1.3-.1 1.6 0 .5 1.3-.2 1.7.4h-1c.5.8.6 1 1.3 1.3l.3.1c.7.3.1.4.5 1 .3.4.6.7 1 .7s1 0 1.1.2c.3.2 1 .2 1 .8.2.6.1.9.7 1.1 1 .4 1.6-.2 1.6 1 0 1.3 1.2.8 1.3 2.2 0 .6 4.2-.7 3.2.8-.3.4-.5-.2-.4.7 0 .8 1 2.1 1.6 2.1.7 0 1.1-.4 1.9-.4 0 2.4.5 2 2.6 2 2.7 0 6.1 2.8 6.3 5.2 0 .7.8 2.7 1.2 2.8 2 .4 1.3 3.9 3.6 3.2 1.4-.4 1.8-.9 3 .4l1 1c.3.1 1.2-.3 1.7-.3v1.7c0 1-1 .1-1 1-.2 1.1-1.2 1.8-1 3 .3 1 .7 5.3 1.5 5.6l-40.6 1.8-15.2 29.7 4.7 3.9c0 4.3-2 6.9-2 11 0 1.9-.6 2.6-.6 4.4 0 2-1 2.7-1.8 3.7a70 70 0 01-8.1-7.4c-7.5-10.8-20.1-16.9-30-26.1-4.6-4.3-12.8-6.6-17.8-10.9a13.8 13.8 0 00-6-2.3z" id="CHP"/>
                <path d="M740.8 526.8l1.3 2.3.2 3.3c0 1.6.5.6 1 1.6.2.4-1.5 2.2-.5 3.5.3.4 2.6-.2 3 0 1.6 1-.8 1.5 2.1 2.6 1.3 1 1.6 2.7 3.3 2.8 1.6 0 4 1 3.6 2.5-.5 1.8 2 1.6 2.3 2.3 0 .1.5 4.5-.3 4.9-1.3.7 0 2.2 0 4 .9-1.7 2.4 1.3 2.7-2.5 0-1.4 1.3-.9 1.6-1.5a26 26 0 001.2-4c.3-1.5.6-.8 1.2-1.5.9-.8-.3-1.4 1-2.4.4-.3 1-.5 1.3-1 1.1-1.3 1-3.2-1.2-3.2l-.2-3.2 1-3.7c1.4-.6 1.4.4 1.8-.7.2-.4.8-.2 1-.3.5-.3 1.1-.1 1.8-.2.4 0 0-.7.7-.7.6 0 2.4.8 1.2 1.4-.2.1-1-.3-.7.3.4 1 .5.3 1 1 .3 0 .5.8.6.8.5 0 1-.4 1.6-.4.8 0 .5.7.5 1.4 0 .6.4.9 0 1.4-.4.7 1.4.7 1.6.8v6.3c.5 0 1.4.7 1.4 1.2 0 1.4-.4 1.6 1.2 1.6l2.5-.2c2.4 0 .9 0 2 1.2.1.2.4.1.3.4-.2.3-1.3 2.2-.2 1.9.3 0 1.5-.1 1.6.2 0 .7-.9.7-.4 1 1.2.7.7.7 2.3.7.1-.3.4 0 .5-.5.1-.3.3-.6.2-1 0-.5-.1 0-.2-.4 0-.6.6-1.7 1-2 .3 0 .5 0 .6-.3.2-.3 0-1.8.2-2.3.6 0 2.6 0 2.6-.7 0-1.2.6-1 1.6-1.4 2-.7 3.4.4 4.4-2 .6-1.5-1-2.3 1.4-2.3.8 0-1 .8.2-.6.4-.6 1.5-.6 1.9-1 .8-1 3.1-1.7 3.1-2.7 0-1 0-.9 1.1-1.2.8-.2 1.8 0 1.8-1.2 0-1.4.8-3.8 1.5-1.4.2.6.6 0 .6 1 0 1.5 1.1 1 1.2.4 0-1 0-.7 1-.7s1.2.4 2.1.7c.4.1 1 .2 1.1.5.2.7 0 1.2.3 1.8.5.6 0 1-.1 1.7.3.3.3.7.5.7.5 0 .5 0 .9.4.9.7.4.3 1.4.2 1.3-.2.8 0 1 1 .2 1 .6-.5.6.9 0 1.3 1 .2 1.2 1.4 0 .8-.9 1.3-.4 2 .3.2.3 1 0 1.1-.5.5-1.2.5-.5 1 .2 0 .2.6.2 1-.6.2 0 .8.7.5.4-.2.7-.4 1.6-.4 1.3 0 .9 1 1.7 1 .4 0 2.2-.3 2.3 0 0 .7.3 2.5 1 1 .5-.9.4-.7.8-.4.2.3.8.2.8.7 0 1.3-.7.5-.7 1.8 0 .5-.2 1.3-.1 1.6 0 .5 1.3-.2 1.7.4l11-.2-.2-7-.1-17.7c-2.4-2-6.6-.2-8.5-1.7-2.2-1.8-2.3-.3-4.7-1-1.4-.4-2.3-1.4-3.6-1.4h-3v7.5c-1.7 0-3-.1-4-1.2-.4-.7-3.1-.7-4-.7-1.8 0 0-.9-.8-1.8-.3-.3-1.5 0-1.8-.2-.7-.2-3.6-2.3-4-1.8-.6.5-1 .4-2.1.4-1 0-.4-3.7-1.8-3.9v-7.5h-1c-.7 0-.2 0-.4-.2-.7-.3-1 .6-1.3-.4 0-.6-1.2.4-1.6.4h-.6c-.4 0-2 .2-2-.2l-.4-1.2-1.7.2v-2.9l-2.8-.7v-1.4c-.4.1-.9.4-1.4.8-1.8.7-3.1 1.3-4.6 2.1-1.1.6-1.9.5-2.9 1.4-2 2.1-5 4.6-8 4.7-.8 0-1.4.2-1.3 1.2 0 1.2-.9 4-2.6 2.8-2-1.4 2.3-2.8 1.2-2.8-.9 0-2.3.3-2.4.2-.6-.6-2.5-.7-3.7-.7-2.2 0-6 0-7 1.2-3.5 3.6-10.5 2-13 5.9l-2.3.7c-.7.2-1.3.5-1.8.9z" id="TAB"/>
            </g>
            <g id="g6310" transform="matrix(1.25,-1.25,1636.39,215.04306)"/>
        </g>
    </svg>
</div>

,

正如迈克尔已经说过的，z-index 目前不适用于 SVG。

您需要使用 JS 事件来捕捉地图路径上的悬停，然后将悬停的路径移动到文档底部。由于它将最后绘制，因此它似乎位于其他路径的前面。

我已经有一个答案来说明如何在此处执行此操作：

SVG transform and transition overlay with hover

这是否完全按照您的意愿工作将取决于您的 SVG 结构。您可能希望移动整个地区/国家，而不是仅移动路径（如该代码所做的那样）。这意味着移动 <g> 父元素，而不仅仅是 <path>。

无论如何，这里的代码与您在问题中的内容相同。

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

var  regions = mysvg.querySELEctorAll("path");
regions.forEach(reg => {

  reg.addEventListener("mouseover",evt => {
    // When the mouse starts hovering over a path,move the path to the front.
    // appendChild() appends an element (the path) to children of a parent element.
    // It will get added to the end of the parent element's list of
    // children. But since,in this case,it is already a child of that
    // parent,it simply gets moved to the end.
    evt.target.parentNode.appendChild(evt.target);
    // Give it the "hover" class
    evt.target.classList.add("hover");
  });

  reg.addEventListener("mouseout",evt => {
    // When mouse leave path,remove the hover class from it
    evt.target.classList.remove("hover");
  });

});
div {
    width: 500px;
}

.mapdiv path {
    fill: rgb(96,255);
    stroke-width: 0.75;
    stroke-miterlimit: 4;
    stroke-opacity: 1;
    stroke-dasharray: none;
    display: inline;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: 0.3s;
    transform-box: fill-box;
}

path.hover {
    fill: rgb(96,100);
    transform: scale(2);
}
<div class="mapdiv">
    <svg width="100%" viewBox="500 300 1000 650" id="svg2" version="1.0" xmlns="http://www.w3.org/2000/svg">
        <g id="layer4">
            <g id="Mexico">
                <path class="uno" d="M821.9 501c-1 .8-1.7 1-2.7 1.8-1 .9-1.2 1.1-2.6 1.2a12 12 0 00-4.2 1.6c-.6.3-.9 1-1 1.6-.4 1 7-1.2 7.4-1.6 1.2-1 2.6-.7 3.7-2 .3-.4.5-1.8-.6-2.6zm-18-44.4c-.1-.3 0-.7-.3-1h-.4s0-.3-.2-.2l-.2.2v.6c0 .1-.3 0-.4.4 0 .2.1.7 0 .8-.1.4-.9 0-.6.6.2.3.5.3.6.5.2.1-.1.2.4.2.2 0 .1-.2.2-.2.3-.1.9 0 .9-.2v-.3h.2c.1 0 .2-.3-.2-1.4zM791.5 433l.6-1c.2-.4-.3-.3-.4-.3h-1c-.6 0 .2-.6-.2-.4l-.4.6v.6c0 .2 0 .3.2.3h.2c.2 0-.2.2.4.2h.6zm102.6 97v-52.4l-15.3-16.8-.6-10.1-2.4.6-1.5 2-2.7-3.2H870l-.6-5.7-10.5.6v-4.2l-3.9-.3h-2.4l-.6-10.5-2-.1a56.9 56.9 0 00-2.5 17.5c0 2.8 3.3 6.3 3 10.8-.1 2.3-3.4 7.9-4.4 10.3-3.4 7.8-.1 12.6-6.6 17.8-3.6 3-11.6 12.5-16 12.9.5 1.2.2 1.6 1.2 1.6s1.8-.5 2.4-.5c.5 0 .5 1.3.7 1.7.6 1 5 .7 6 .7-2.4 0-6.5 0-4.6 4h2.1c1.8 0-2.2.4-2.6.4-.9.1-1.9 3.8-3.7 3-4.4-1.7-2.4 4.6-6.3 4-.5 0-1.8-1.3-2.9-.7-1 .7-.7 3.3-1.6 3.3h-2.8c-1.7 0-1.3.2-1.4-1.4 0-.8-.4-.6 1-.7 0 0 1.5.2 1.1-.4-.4-.6-1-.9-1-1.7 0-2.3-1 .8-1.8-.5-1.6-2.4-2.1 1-3.8 0-.7-.4 0 0-1.1-.4-.3-.1-1-1.2-1.2-1.2-1.3-.1-1.1.5-1.6 1.2-.5 0-2.5.5-3 .2-.9-.3-1.2-.5-.3-.7.4-.1 1.2 0 1.6 0 .5 0 1.4.3 1.2-.5-.2-.5-.4-.8-.5-1.4 0-.5 0-.5.3-.7 1.7 0 3.3 0 4.9.5.7.3 1.4-.7 2.5-.7.6 0 1.3-.6.7-1.2-.5-.5-3.3-.4-4.2-1.1-1.7-1.4-4.6.6-6 1.4-1 .5-3.5 0-4.7.4-1.5.5-2.6.3-3.6.6v1.4l2.8.7v3l1.7-.3.4 1.2c0 .4 1.6.2 2 .2h.6c.4 0 1.5-1 1.6-.4.2 1 .6 0 1.3.4.2.2-.3.2.4.2h1v7.5c1.4.2.8 3.9 1.8 3.9s1.5.1 2-.4 3.4 1.6 4 1.8c.4.1 1.6-.1 2 .2.6 1-1 1.8.7 1.8.9 0 3.6 0 4 .7 1 1 2.3 1.2 4 1.2v-7.6h3c1.3 0 2.2 1 3.6 1.5 2.4.7 2.5-.8 4.7 1 1.9 1.5 6.1-.4 8.5 1.7v4.3c18.8 0 34.8-1 53.4-2.4z" id="CAM"/>
                <path d="M745.7 598l-.2-2.3c0-1.4.7-1.2.7-2.3 0-1.7-.4-1.5 1.3-1.6.6 0 .3-1.9.3-2.6V586c0-2-1.9-2.1-4.2-2.3l7.1-21.9c.8-.3 1.6-.3 2-.8.5-.5-.6-1.4.3-2.3.9-.8 3.2 0 3.6-1l.2-1c.9-1.8 2.4 1.2 2.7-2.6 0-1.4 1.3-.9 1.6-1.5a26 26 0 001.2-4c.3-1.5.6-.8 1.2-1.5.9-.8-.3-1.4 1-2.4.4-.3 1-.5 1.3-1 1.1-1.3 1-3.2-1.2-3.2l-.2-3.2 1-3.7c1.4-.6 1.4.4 1.8-.7.2-.4.8-.2 1-.3.5-.3 1.1-.1 1.8-.2.4 0 0-.7.7-.7.6 0 2.4.8 1.2 1.4-.2.1-1-.3-.7.3.4 1 .5.3 1 1 .3 0 .5.8.6.8.5 0 1-.4 1.6-.4.8 0 .5.7.5 1.4 0 .6.4.9 0 1.4-.4.7 1.4.7 1.6.8v6.3c.5 0 1.4.7 1.4 1.2 0 1.4-.4 1.6 1.2 1.6l2.5-.2c2.4 0 .9 0 2 1.2.1.2.4.1.3.4-.2.3-1.3 2.2-.2 1.9.3 0 1.5-.1 1.6.2 0 .7-.9.7-.4 1 1.2.7.7.7 2.3.7.1-.3.4 0 .5-.5.1-.3.3-.6.2-1 0-.5-.1 0-.2-.4 0-.6.6-1.7 1-2 .3 0 .5 0 .6-.3.2-.3 0-1.8.2-2.3.6 0 2.6 0 2.6-.7 0-1.2.6-1 1.6-1.4 2-.7 3.4.4 4.4-2 .6-1.5-1-2.3 1.4-2.3.8 0-1 .8.2-.6.4-.6 1.5-.6 1.9-1 .8-1 3.1-1.7 3.1-2.7 0-1 0-.9 1.1-1.2.8-.2 1.8 0 1.8-1.2 0-1.4.8-3.8 1.5-1.4.2.6.6 0 .6 1 0 1.5 1.1 1 1.2.4 0-1 0-.7 1-.7s1.2.4 2.1.7c.4.1 1 .2 1.1.5.2.7 0 1.2.3 1.8.5.6 0 1-.1 1.7.3.3.3.7.5.7.5 0 .5 0 .9.4.9.7.4.3 1.4.2 1.3-.2.8 0 1 1 .2 1 .6-.5.6.9 0 1.3 1 .2 1.2 1.4 0 .8-.9 1.3-.4 2 .3.2.3 1 0 1.1-.5.5-1.2.5-.5 1 .2 0 .2.6.2 1-.6.2 0 .8.7.5.4-.2.7-.4 1.6-.4 1.3 0 .9 1 1.7 1 .4 0 2.2-.3 2.3 0 0 .7.3 2.5 1 1 .5-.9.4-.7.8-.4.2.3.8.2.8.7 0 1.3-.7.5-.7 1.8 0 .5-.2 1.3-.1 1.6 0 .5 1.3-.2 1.7.4h-1c.5.8.6 1 1.3 1.3l.3.1c.7.3.1.4.5 1 .3.4.6.7 1 .7s1 0 1.1.2c.3.2 1 .2 1 .8.2.6.1.9.7 1.1 1 .4 1.6-.2 1.6 1 0 1.3 1.2.8 1.3 2.2 0 .6 4.2-.7 3.2.8-.3.4-.5-.2-.4.7 0 .8 1 2.1 1.6 2.1.7 0 1.1-.4 1.9-.4 0 2.4.5 2 2.6 2 2.7 0 6.1 2.8 6.3 5.2 0 .7.8 2.7 1.2 2.8 2 .4 1.3 3.9 3.6 3.2 1.4-.4 1.8-.9 3 .4l1 1c.3.1 1.2-.3 1.7-.3v1.7c0 1-1 .1-1 1-.2 1.1-1.2 1.8-1 3 .3 1 .7 5.3 1.5 5.6l-40.6 1.8-15.2 29.7 4.7 3.9c0 4.3-2 6.9-2 11 0 1.9-.6 2.6-.6 4.4 0 2-1 2.7-1.8 3.7a70 70 0 01-8.1-7.4c-7.5-10.8-20.1-16.9-30-26.1-4.6-4.3-12.8-6.6-17.8-10.9a13.8 13.8 0 00-6-2.3z" id="CHP"/>
                <path d="M740.8 526.8l1.3 2.3.2 3.3c0 1.6.5.6 1 1.6.2.4-1.5 2.2-.5 3.5.3.4 2.6-.2 3 0 1.6 1-.8 1.5 2.1 2.6 1.3 1 1.6 2.7 3.3 2.8 1.6 0 4 1 3.6 2.5-.5 1.8 2 1.6 2.3 2.3 0 .1.5 4.5-.3 4.9-1.3.7 0 2.2 0 4 .9-1.7 2.4 1.3 2.7-2.5 0-1.4 1.3-.9 1.6-1.5a26 26 0 001.2-4c.3-1.5.6-.8 1.2-1.5.9-.8-.3-1.4 1-2.4.4-.3 1-.5 1.3-1 1.1-1.3 1-3.2-1.2-3.2l-.2-3.2 1-3.7c1.4-.6 1.4.4 1.8-.7.2-.4.8-.2 1-.3.5-.3 1.1-.1 1.8-.2.4 0 0-.7.7-.7.6 0 2.4.8 1.2 1.4-.2.1-1-.3-.7.3.4 1 .5.3 1 1 .3 0 .5.8.6.8.5 0 1-.4 1.6-.4.8 0 .5.7.5 1.4 0 .6.4.9 0 1.4-.4.7 1.4.7 1.6.8v6.3c.5 0 1.4.7 1.4 1.2 0 1.4-.4 1.6 1.2 1.6l2.5-.2c2.4 0 .9 0 2 1.2.1.2.4.1.3.4-.2.3-1.3 2.2-.2 1.9.3 0 1.5-.1 1.6.2 0 .7-.9.7-.4 1 1.2.7.7.7 2.3.7.1-.3.4 0 .5-.5.1-.3.3-.6.2-1 0-.5-.1 0-.2-.4 0-.6.6-1.7 1-2 .3 0 .5 0 .6-.3.2-.3 0-1.8.2-2.3.6 0 2.6 0 2.6-.7 0-1.2.6-1 1.6-1.4 2-.7 3.4.4 4.4-2 .6-1.5-1-2.3 1.4-2.3.8 0-1 .8.2-.6.4-.6 1.5-.6 1.9-1 .8-1 3.1-1.7 3.1-2.7 0-1 0-.9 1.1-1.2.8-.2 1.8 0 1.8-1.2 0-1.4.8-3.8 1.5-1.4.2.6.6 0 .6 1 0 1.5 1.1 1 1.2.4 0-1 0-.7 1-.7s1.2.4 2.1.7c.4.1 1 .2 1.1.5.2.7 0 1.2.3 1.8.5.6 0 1-.1 1.7.3.3.3.7.5.7.5 0 .5 0 .9.4.9.7.4.3 1.4.2 1.3-.2.8 0 1 1 .2 1 .6-.5.6.9 0 1.3 1 .2 1.2 1.4 0 .8-.9 1.3-.4 2 .3.2.3 1 0 1.1-.5.5-1.2.5-.5 1 .2 0 .2.6.2 1-.6.2 0 .8.7.5.4-.2.7-.4 1.6-.4 1.3 0 .9 1 1.7 1 .4 0 2.2-.3 2.3 0 0 .7.3 2.5 1 1 .5-.9.4-.7.8-.4.2.3.8.2.8.7 0 1.3-.7.5-.7 1.8 0 .5-.2 1.3-.1 1.6 0 .5 1.3-.2 1.7.4l11-.2-.2-7-.1-17.7c-2.4-2-6.6-.2-8.5-1.7-2.2-1.8-2.3-.3-4.7-1-1.4-.4-2.3-1.4-3.6-1.4h-3v7.5c-1.7 0-3-.1-4-1.2-.4-.7-3.1-.7-4-.7-1.8 0 0-.9-.8-1.8-.3-.3-1.5 0-1.8-.2-.7-.2-3.6-2.3-4-1.8-.6.5-1 .4-2.1.4-1 0-.4-3.7-1.8-3.9v-7.5h-1c-.7 0-.2 0-.4-.2-.7-.3-1 .6-1.3-.4 0-.6-1.2.4-1.6.4h-.6c-.4 0-2 .2-2-.2l-.4-1.2-1.7.2v-2.9l-2.8-.7v-1.4c-.4.1-.9.4-1.4.8-1.8.7-3.1 1.3-4.6 2.1-1.1.6-1.9.5-2.9 1.4-2 2.1-5 4.6-8 4.7-.8 0-1.4.2-1.3 1.2 0 1.2-.9 4-2.6 2.8-2-1.4 2.3-2.8 1.2-2.8-.9 0-2.3.3-2.4.2-.6-.6-2.5-.7-3.7-.7-2.2 0-6 0-7 1.2-3.5 3.6-10.5 2-13 5.9l-2.3.7c-.7.2-1.3.5-1.8.9z" id="TAB"/>
            </g>
            <g id="g6310" transform="matrix(1.25,215.04306)"/>
        </g>
    </svg>
</div>

大佬总结

以上是大佬教程为你收集整理的SVG重叠中的缩放路径全部内容，希望文章能够帮你解决SVG重叠中的缩放路径所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：SVG重叠中的缩放路径
猜你在找的程序问答相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap