在 SVG 中设置悬停语句的样式 [英] styling a hover statement in SVG

问题描述

我正在计划基于此 SVG 插图的网络菜单":

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

我正在努力解决如何解决连接两个圆圈的笔划的悬停样式问题.换句话说，当元素是

时，我如何在SVG文件中设置元素的样式

1. 触发元素外

和

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

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

谢谢.

解决方案

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

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

window.addEventListener('DOMContentLoaded', (event) => {var allCircles = document.querySelectorAll("circle");//为每个圆添加一个点击处理程序//将类active"添加到点击的圆圈中.allCircles.forEach(元素 => {element.addEventListener("click", clickHandler);element.addEventListener("mouseover", mouseoverHandler);element.addEventListener("mouseout", mouseoutHandler);});});函数 clickHandler(evt) {//清除当前选择(从任何圆圈中删除类活动")allCircles.forEach((circle) => circle.classList.remove("active"));//标记被点击的圆圈被选中evt.target.classList.add("active");//清除所有当前突出显示的行clearHighlightedLines();}函数 mouseoverHandler(evt) {让 activeCircle = document.querySelector("circle.active");让hoveredCircle = evt.target;if (activeCircle && (activeCircle != hoveredCircle)) {//获取具有与活动和悬停圆圈匹配的类的行let line = document.querySelector("line."+activeCircle.id+"."+hoveredCircle.id);//将类highlight"添加到该行如果(行)line.classList.add("highlight");}}函数 mouseoutHandler(evt) {clearHighlightedLines();}函数 clearHighlightedLines() {//找到带有highlight"类的行(如果有)var line = document.querySelector("line.highlight");//移除highlight"类如果(行)line.classList.remove("highlight");}

#c3 {填充:栗色；}#c4 {填充物:钢蓝；}#c5 {填充:rebeccapurple；}圈:悬停:不(.活动){中风:#999；笔画宽度:1.5；}圆圈.活动{笔画:黑色；笔画宽度:1.5；}线 {笔画:金色；笔画宽度:1；}line.highlight {笔画:黑色；}

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

1. outside the trigger element

AND

2. based on the currently active page/active circle

I would appreciate help to find a way to do this - or alternative ways.

Thanks.

解决方案

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>

这篇关于在 SVG 中设置悬停语句的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！