如何通过JavaScript将SVG中的LightSwitch与Lights元素颜色切换为红色

嘿，我看了你的代码，问题出在你直接修改了<g>元素的class，但实际上你的stroke样式是应用在<g>内部的<path>标签上的！咱们来调整一下代码，让LightSwitch和Lights的路径都能正确切换成红色（也就是V110类）：

关键问题分析 #

你定义的.NOVOLTS和.V110样式都是作用在<path>元素上的，但你之前的代码只修改了<g id="LightSwitch">的class，这个group本身没有继承stroke样式，所以颜色不会变化。咱们需要定位到每个group内部的<path>元素来修改class。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// 0=OPEN 1=CLOSE
let Switchstate = 0
</script>
</head>
<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by Microsoft Visio, SVG Export Switch.svg Unit01 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="0.853639in" height="1.96174in"
    viewBox="0 0 61.462 141.245" xml:space="preserve" color-interpolation-filters="sRGB" class="st4">

<style type="text/css">
<![CDATA[
    .NOVOLTS {stroke:#0000ff;stroke-linecap:butt;stroke-width:2}
    .st2 {stroke:#0000ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
    .st3 {stroke:#ff0000;stroke-linecap:butt;stroke-width:2}
    .V110 {stroke:#ff0000;stroke-linecap:butt;stroke-width:2}
    .st3 {stroke:#ff0000;stroke-linecap:butt;stroke-width:2}
    .st4 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
]]>
</style>

<g v:mID="76" v:index="1" v:groupContext="foregroundPage">
    <title>Wire</title>
    <v:pageProperties v:drawingScale="1" v:pageScale="1" v:drawingUnits="19" v:shadowOffsetX="9" v:shadowOffsetY="-9"/>
    <g id="Lights" v:mID="536" v:groupContext="shape" transform="translate(0,0) rotate(0)">
        <title>Lights</title>
        <v:userDefs>
            <v:ud v:nameU="visAltText" v:val="VT4(Lights)"/>
        </v:userDefs>
        <path d="M100 100 L100 200" class="NOVOLTS"/>
    </g>
    <g id="LightSwitch" v:mID="539" v:groupContext="shape" transform="translate(0.0, 0.0) rotate(0.0)">
        <title>LightSwitch</title>
        <path d="M100 100 L60 50" class="NOVOLTS"/>
    </g>
    <g id="SUPPLY" transform="translate(0.0, 0.0)" v:mID="540" v:groupContext="group">
        <g id="shape533-8" v:mID="533" v:groupContext="shape" transform="translate(0.0, 0.0)">
            <title>A</title>
            <path d="M95 50 L105 50" class="V110"/>
        </g>
        <g id="shape535-11" v:mID="535" v:groupContext="shape" transform="translate(0.0, 0.0) rotate(0.0)">
            <title>B</title>
            <path d="M100 10 L100 50" class="V110"/>
        </g>
    </g>
</g>
</svg>
</body>

<script type="text/javascript">
function ToggleState() {
    // 获取两个group元素
    const lightSwitchGroup = document.getElementById("LightSwitch");
    const lightsGroup = document.getElementById("Lights");
    // 获取group内部的path元素
    const switchPath = lightSwitchGroup.querySelector("path");
    const lightsPath = lightsGroup.querySelector("path");

    if (Switchstate === 0) {
        Switchstate = 1;
        console.log("Turn ON...");
        lightSwitchGroup.setAttribute("transform", "translate(0,0) rotate(0,100, 100)");
        // 切换path的class为红色的V110
        switchPath.className.baseVal = "V110";
        lightsPath.className.baseVal = "V110";
    } else {
        lightSwitchGroup.setAttribute("transform", "translate(0,0) rotate(39,100, 100)");
        Switchstate = 0;
        console.log("Turn OFF...");
        // 切换回蓝色的NOVOLTS
        switchPath.className.baseVal = "NOVOLTS";
        lightsPath.className.baseVal = "NOVOLTS";
    }
}
///////////////////////////////////////////////////////////////////////
var pic_src=setInterval(ToggleState,2000);
</script>
</html>

核心修改点 #

• 新增了获取Lights元素及其内部<path>的代码
• 切换状态时，同时修改LightSwitch和Lights内部路径的class属性
• 使用querySelector("path")精准定位到每个group里的路径元素，确保样式能正确应用

这样一来，每次切换状态时，两个元素的路径都会在蓝色（NOVOLTS）和红色（V110）之间切换啦！

备注：内容来源于stack exchange，提问作者Joe