如何使用相同的位置缩放svg，但使用其他svg元素

Question

我有一系列svg ...关于悬停我使用了transform：缩放svg到其他svg的问题...我想要活动的svg是对其他SVG元素顶部 这里是我的代码.... 由于事先

.group{ 
 
\t z-index: -1; 
 
} 
 
.group path:hover{ 
 
\t 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{ 
 
\t 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'。