I am working on an industrial flow HMI and I believe javascript is the only way I can easily achieve my goals w/o purchasing special SW. I need some help with color changes.
Here's my example code; how do I make the "LightSwitch" and the "Lights" change color to RED? I am trying to change the class but not having any luck.
<!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() {
var theSwitch = document.getElementById("LightSwitch")
if (Switchstate==0) {
Switchstate = 1;
console.log("Turn ON...");
theSwitch.setAttribute("transform", "translate(0,0) rotate(0,100, 100)");
theSwitch.className.baseVal = "V110";
} else {
theSwitch.setAttribute("transform", "translate(0,0) rotate(39,100, 100)");
Switchstate = 0;
console.log("Turn OFF...");
theSwitch.className.baseVal = "NOVOLTS";
}
}
///////////////////////////////////////////////////////////////////////
var pic_src=setInterval(ToggleState,2000);
</script>`enter code here`
</html>
Setting the class on the child element will prevent that child element from being affected by parent class changes. The class attribute just needs moving to the element.
<!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)" class="NOVOLTS">
<title>LightSwitch</title>
<path d="M100 100 L60 50" />
</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() {
var theSwitch = document.getElementById("LightSwitch")
if (Switchstate==0) {
Switchstate = 1;
console.log("Turn ON...");
theSwitch.setAttribute("transform", "translate(0,0) rotate(0,100, 100)");
theSwitch.className.baseVal = "V110";
} else {
theSwitch.setAttribute("transform", "translate(0,0) rotate(39,100, 100)");
Switchstate = 0;
console.log("Turn OFF...");
theSwitch.className.baseVal = "NOVOLTS";
}
}
///////////////////////////////////////////////////////////////////////
var pic_src=setInterval(ToggleState,2000);
</script>`enter code here`
</html>