我有一系列的svg ...在悬停时我使用了转换:将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>
&#13;
答案 0 :(得分:0)
请使用z-index悬停项目。尝试&#z;指数:9999&#39;在活跃的悬停物品上。