给SVG路径添加ID后hover过渡失效，如何解决？

核心问题分析 #

你之前的代码失效有两个关键原因：

• 错误使用相邻兄弟选择器：#path_hover_infilm:hover + .a_infilm 中，#path_hover_infilm 是第一个SVG的子元素，而 .a_infilm 是第一个SVG的同级兄弟元素，相邻兄弟选择器+只能选中同级的下一个元素，因此这个选择器无法匹配到目标SVG，过渡效果根本不会触发。
• 透明路径无法响应hover：你给触发路径设置了fill-opacity:0%，而SVG默认的pointer-events: visiblePainted规则会让透明填充的元素不接收鼠标事件，导致hover无法触发。

纯CSS解决方案（保留原有SVG结构） #

修改CSS选择器，并给触发路径添加鼠标事件响应规则：

body{
    background-color: #ECEDED;
    overflow-x: hidden;
    min-width: max-content;
    margin: 0;
}
svg{
    height: 100%;
    position: absolute;
}
.hover_infilm{
    position: absolute;
    top:-22px;
    left:60px;
    z-index:1;
}
#path_hover_infilm{
    pointer-events: fill; /* 强制透明路径接收鼠标事件 */
}
.a_infilm{
    position: absolute;
    top:-51px;
    left:60px;
    z-index:-8;
    opacity: 0%;
    transform-origin: center;
    transition: all .3s ease-in-out;
}
/* 用包含路径的SVG的hover状态，通过通用兄弟选择器选中目标SVG */
.hover_infilm:hover ~ .a_infilm{
    transform: scale(1.15) rotate(4deg);
    opacity: 100%;
}

HTML结构无需修改，保持原有的两个同级SVG即可。

更简洁的优化方案（合并SVG容器） #

把触发路径和目标图形放在同一个SVG里，结构更紧凑，也避免了定位问题：

<svg width="863" height="545" viewBox="0 0 863 545" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- 触发路径：设置透明填充并强制响应鼠标事件 -->
    <path id="path_hover_infilm" 
          d="M718.983 0.950684L1.7179 261.834L605.491 543.503L803.515 521.505L861.971 33.4759L718.983 0.950684Z" 
          fill="white" fill-opacity="0%" 
          pointer-events="fill"/>
    <!-- 目标图形：用g分组方便控制样式 -->
    <g class="a_infilm" opacity="0%" transform-origin="center" style="transition: all .3s ease-in-out;">
        <path d="M718.983 0.950684L1.7179 261.834L605.491 543.503L803.515 521.505L861.971 33.4759L718.983 0.950684Z" fill="white"/>
    </g>
</svg>

对应的CSS只需保留关键选择器：

#path_hover_infilm:hover ~ .a_infilm{
    transform: scale(1.15) rotate(4deg);
    opacity: 100%;
}

内容的提问来源于stack exchange，提问作者Jonathan May