如何不使用<style>标签实现SVG hover变色并避免样式冲突

你的核心问题是SVG内部<style>的样式会全局生效，污染其他SVG的样式，下面给你几个适配复杂SVG结构的靠谱解决办法：

方法1：给当前SVG加唯一ID，用ID前缀隔离样式 #

这是兼容性最好、最稳妥的方案。给你的SVG设置一个全局唯一的ID，然后把所有样式规则都嵌套在这个ID选择器下面，确保样式只作用于当前SVG内部的元素。

修改后的代码示例：

<svg id="unique-project-svg">
    <style>
        #unique-project-svg #level_1:hover .st5 {fill: #BE82FA;}
        <!-- 其他样式规则也都加上#unique-project-svg前缀 -->
    </style>
    <!-- 你的复杂SVG元素结构 -->
</svg>

只要保证每个SVG的ID不重复，就能彻底避免样式冲突，不管你的SVG结构多复杂，都能直接套用这个逻辑。

方法2：使用:scope伪类简化样式隔离 #

现代浏览器支持SVG内部<style>使用:scope伪类，它代表当前SVG元素，相当于自动给样式加上了当前SVG的作用域，写法更简洁：

<svg>
    <style>
        :scope #level_1:hover .st5 {fill: #BE82FA;}
    </style>
    <!-- 你的复杂SVG元素结构 -->
</svg>

注意：如果需要兼容IE等老旧浏览器，还是优先用方法1，:scope在Chrome、Firefox、Edge等现代浏览器里没问题，但老浏览器不支持。

方法3：用JavaScript绑定hover事件动态修改样式 #

如果不想碰CSS样式，可以给SVG内部需要变色的元素绑定mouseover和mouseout事件，通过JS动态修改fill属性。比如：

<svg id="js-hover-svg">
    <!-- 假设.st5对应的元素是<path class="st5" ... /> -->
    <path class="st5" d="..." />
    <script type="text/javascript">
        const svg = document.getElementById('js-hover-svg');
        const level1 = svg.getElementById('level_1');
        const targetElements = svg.querySelectorAll('.st5');
        const originalColor = '#原来的颜色';
        
        level1.addEventListener('mouseover', () => {
            targetElements.forEach(el => el.setAttribute('fill', '#BE82FA'));
        });
        
        level1.addEventListener('mouseout', () => {
            targetElements.forEach(el => el.setAttribute('fill', originalColor));
        });
    </script>
</svg>

这种方法完全隔离样式，不会影响其他SVG，但需要你明确元素的原始颜色，适合需要更复杂交互逻辑的场景。

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