styling a hover statement in SVG - css

Question

I'm planning a web 'menu' based on this SVG illustation:
the principle of my idea; a circle styled as being active, a circle styled as hover and an accompanying stroke that also needs to be styled
As I read the specs of an SVG file, I cant work with if-then statements.
I'm struggling with how to solve the hover styling of the stroke that is linking the two circles. In other words, how do I style an element in an SVG file when the element is
outside the trigger element
AND
based on the currently active page/active circle
I would appreciate help to find a way to do this - or alternative ways.
Thanks.

Answer 1

It can be done fairly simply. But it requires a little javascript.
Here's a simplified example with just three circles. Hopefully it should be obvious how to add the other two circles and the rest of the lines. The JS and CSS should work as is for any number of circles and lines.
window.addEventListener('DOMContentLoaded', (event) => {
var allCircles = document.querySelectorAll("circle");
// Add an click handler to every circle that
// adds the class "active" to the clicked circle.
allCircles.forEach(element => {
element.addEventListener("click", clickHandler);
element.addEventListener("mouseover", mouseoverHandler);
element.addEventListener("mouseout", mouseoutHandler);
});
});
function clickHandler(evt) {
// Clear current selection (remove class "active" from any circle)
allCircles.forEach((circle) => circle.classList.remove("active"));
// Mark clicked circle selected
evt.target.classList.add("active");
// Clear any currently highlighted lines
clearHighlightedLines();
}
function mouseoverHandler(evt) {
let activeCircle = document.querySelector("circle.active");
let hoveredCircle = evt.target;
if (activeCircle && (activeCircle != hoveredCircle)) {
// Get the line that has classes matching both the actibve and hovered circle
let line = document.querySelector("line."+activeCircle.id+"."+hoveredCircle.id);
// Add the class "highlight" to that line
if (line)
line.classList.add("highlight");
}
}
function mouseoutHandler(evt) {
clearHighlightedLines();
}
function clearHighlightedLines() {
// Find the line with class "highlight" (if any)
var line = document.querySelector("line.highlight");
// Remove the class "highlight"
if (line)
line.classList.remove("highlight");
}
#c3 {
fill: maroon;
}
#c4 {
fill: steelblue;
}
#c5 {
fill: rebeccapurple;
}
circle:hover:not(.active) {
stroke: #999;
stroke-width: 1.5;
}
circle.active {
stroke: black;
stroke-width: 1.5;
}
line {
stroke: gold;
stroke-width: 1;
}
line.highlight {
stroke: black;
}
<svg viewBox="0 0 100 100">
<!-- line from c3 to c4 -->
<line x1="75" y1="40" x2="25" y2="70" class="c3 c4"/>
<!-- line from c3 to c5 -->
<line x1="75" y1="40" x2="57" y2="70" class="c3 c5"/>
<!-- line from c4 to c5 -->
<line x1="25" y1="70" x2="57" y2="70" class="c4 c5"/>
<circle id="c3" cx="75" cy="40" r="10"/>
<circle id="c4" cx="25" cy="70" r="10"/>
<circle id="c5" cx="57" cy="70" r="10"/>
</svg>