html - 如何缩放具有相同位置但位于其他 svg 元素之上的 svg

Question

我有一系列的 svg ...在悬停时我使用了 transform:scale svg 低于其他 svg 的问题...我希望事件 svg 位于其他 svg 元素的顶部 这是我的代码.... 提前致谢

.group{
	z-index: -1;
}
.group path:hover{
	stroke-width: 5px;
transform: matrix(1.4, 0, 0, 1.4, -20, -17.604);
z-index: 1;
stroke: #20FDC3;
stroke-width:5px;
position: absolute;
}
g{
	position: relative;
}

<svg id="shape-services-grid" width="100%" viewBox="0 0 1001 473" version="1.1" style="padding-left:10%;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="root" transform="matrix(1,0,0,1,0,-1)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="g1" class="group groupall" transform="matrix(1,0,0,1,255.658,290.5)">
                        <a xlink:href="#" data-loader-skip="true">
                            <path d="M75,87.31 L25,87.31 L0,44.01 L25,0.71 L75,0.71 L100,44.01 L75,87.31 Z" fill="#255C61"></path>
                            <text font-family="Open Sans" font-size="10" font-weight="600" fill="#FFFFFF" style="pointer-events: none;">
                                <tspan x="41" y="42">text</tspan>
                                <tspan x="30" y="56">text</tspan>
                            </text>
                        </a>
                    </g>
                    <g id="g2" class="group groupall" transform="matrix(1,0,0,1,425.87,289.33)">
                        <a xlink:href="#" data-loader-skip="true">
                            <path d="M100,44.01 L75,87.31 L25,87.31 L0,44.01 L25,0.71 L75,0.71 L100,44.01 L100,44.01 Z" fill="#255C61"></path>
                            <text font-family="Open Sans" font-size="10" font-weight="600" fill="#FFFFFF" style="pointer-events: none;">
                                <tspan x="33.8861445" y="42.17">text</tspan>
                                <tspan x="18.7372188" y="56.17">text</tspan>
                            </text>
                        </a>
                    </g>
                    <g id="g3" class="group groupall" transform="matrix(1,0,0,1,255.658,193.9)">
                        <a xlink:href="#" data-loader-skip="true">
                            <path d="M75,87.31 L25,87.31 L0,44.01 L25,0.71 L75,0.71 L100,44.01 L75,87.31 Z" fill="#219E87"></path>
                            <text font-family="Open Sans" font-size="10" font-weight="600" fill="#FFFFFF" style="pointer-events: none;">
                                <tspan x="21.0411016" y="42.23">text</tspan>
                                <tspan x="26.5879766" y="56.23">text</tspan>
                            </text>
                        </a>
                    </g>
                    <g id="g4" class="group groupall" transform="matrix(1,0,0,1,425.87,192.73)">
                        <a xlink:href="#" data-loader-skip="true">
                            <path d="M100,44.01 L75,87.31 L25,87.31 L0,44.01 L25,0.71 L75,0.71 L100,44.01 L100,44.01 Z" fill="#255C61"></path>
                            <text font-family="Open Sans" font-size="10" font-weight="600" fill="#FFFFFF" style="pointer-events: none;">
                                <tspan x="31" y="41.7">text</tspan>
                                <tspan x="33.6749922" y="55.7">text</tspan>
                            </text>
                        </a>
                    </g>
                    
                    <g id="g6" class="group groupall" transform="matrix(1,0,0,1,170.621,244.7)">
                        <a xlink:href="#" data-loader-skip="true">
                            <path d="M75,87.31 L25,87.31 L0,44.01 L25,0.71 L75,0.71 L100,44.01 L75,87.31 Z" fill="#219E87"></path>
                            <text font-family="Open Sans" font-size="10" font-weight="600" fill="#FFFFFF" style="pointer-events: none;">
                                <tspan x="17" y="42">text</tspan>
                                <tspan x="19" y="56">text</tspan>
                            </text>
                        </a>
                    </g>
                    <g id="g7" class="group groupall" transform="matrix(1,0,0,1,510.864,241.03)">
                        <a xlink:href="#" data-loader-skip="true">
                            <path d="M75,87.31 L25,87.31 L0,44.01 L25,0.71 L75,0.71 L100,44.01 L75,87.31 Z" fill="#219E87"></path>
                            <text font-family="Open Sans" font-size="10" font-weight="600" fill="#FFFFFF" style="pointer-events: none;">
                                <tspan x="14" y="43">text</tspan>
                                <tspan x="33" y="58">text</tspan>
                            </text>
                        </a>
                    </g>
                    <g id="g8" class="group groupall" transform="matrix(1,0,0,1,340.843,337.63)">
                        <a xlink:href="#" data-loader-skip="true">
                            <path d="M75,87.31 L25,87.31 L0,44.01 L25,0.71 L75,0.71 L100,44.01 L75,87.31 Z" fill="#255C61"></path>
                            <text font-family="Open Sans" font-size="10" font-weight="600" fill="#FFFFFF" style="pointer-events: none;">
                                <tspan x="28.5520938" y="41.8">text</tspan>
                                <tspan x="17.6853945" y="55.8">text</tspan>
                            </text>
                        </a>
                    </g>
                    <g class=" group-disabled groupall" transform="translate(341.000000, 434.000000)">
                      
                            <path d="M75,87.31 L25,87.31 L0,44.01 L25,0.71 L75,0.71 L100,44.01 L75,87.31 L75,87.31 Z" id="Shape" fill="#255C61"></path>
                        </g>
     </g>
</svg>

---

http://codepen.io/mgkrish/pen/LWVxrd?editors=0100

Answer 1

请为悬停元素使用 z-index。在事件悬停元素上尝试“z-index:9999”。