在 SVG 中设置悬停语句的样式

Question

我正在计划一个基于此 SVG 插图的网络“菜单”： 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

当我阅读 SVG 文件的规范时，我无法使用 if-then 语句。

我正在努力解决如何解决连接两个圆圈的笔划的悬停样式。换句话说，当元素是 SVG 文件中的元素时，如何设置其样式

1. 在触发元素之外

与

1. 基于当前活跃页面/活跃圈子

如果能帮助我找到一种方法或替代方法，我将不胜感激。

谢谢。

Answer 1

这可以相当简单地完成。但它需要一点 javascript。

这是一个只有三个圆圈的简化示例。希望如何添加其他两个圆圈和其余线条应该很明显。 JS 和 CSS 应该适用于任意数量的圆和线。

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>