svg - 如何在SVG中实现点击不同Tab时高亮对应线条？

Question

想实现这样一个需求，点击不同的tab时，高亮对应的线，目前使用svg写的，但是三角形的颜色没办法跟随线去控制。

尝试了使用currentColor，但是并没有达到期望值。
demo是使用hover代替点击事件，原以为marker-end之后，三角会属于当前路径的子集，所以想着给三角一个currentColor,但是实际尝试下来发现无法达到预期。于是代码由一个三角形改成了三个，目前只能通过单独去修改对应的路径才能实现需求。

期望可以使用一个三角形，鼠标经过不同线时，高亮对应线条及其尾部三角形。

代码段

Answer 1

要实现点击不同Tab时高亮对应线条及其尾部三角形，你可以利用SVG的CSS样式和JavaScript事件处理。下面是一个简化的解决方案：

1. 为每个线条和对应的三角形设置唯一的类或ID。
2. 使用CSS定义高亮状态。
3. 使用JavaScript监听点击事件，并应用或移除高亮状态。

CSS样式

定义一个类（例如highlight），用于设置高亮状态的样式。

.highlight {  stroke: red; /* 假设你想要的高亮颜色 */  fill: red; /* 假设你想要的高亮颜色 */}

SVG结构

确保你的SVG线条和三角形都有唯一的类或ID，这样可以通过CSS和JavaScript单独选中它们。

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">  <line class="line" id="line1" x1="50" y1="50" x2="200" y2="50" stroke="black" stroke-width="3" marker-end="url(#triangle)" />  <line class="line" id="line2" x1="50" y1="100" x2="200" y2="100" stroke="black" stroke-width="3" marker-end="url(#triangle)" />  <!-- 更多的线条... -->  <defs>    <marker id="triangle" viewBox="0 -5 10 10" refX="10" refY="0" markerWidth="6" markerHeight="6" orient="auto">      <path d="M 0 -5 L 10 0 L 0 5 z" fill="black" />    </marker>  </defs></svg>

JavaScript事件处理

使用JavaScript监听每个线条的点击事件，并添加或移除highlight类。

// 获取所有的线条元素const lines = document.querySelectorAll('.line');// 为每个线条添加点击事件监听器lines.forEach(function(line) {  line.addEventListener('click', function() {    // 移除所有线条的高亮状态    lines.forEach(function(otherLine) {      otherLine.classList.remove('highlight');    });        // 为被点击的线条添加高亮状态    this.classList.add('highlight');        // 假设三角形使用相同的颜色，不需要额外处理    // 如果需要单独控制三角形，你可能需要修改三角形的颜色或者引用  });});

注意事项

• 如果三角形是通过marker-end添加的，并且你想要三角形颜色和线条颜色一致，那么你可能需要为每个线条定义不同的marker，并在点击时修改marker的fill属性。
• 上述代码示例假设三角形颜色和线条颜色一致，且不需要单独控制。如果需要单独控制三角形颜色，你可能需要为每个三角形定义一个单独的样式，并在点击事件处理程序中更新它。
• 请确保在修改CSS或SVG结构时，你的选择器和逻辑与你的具体实现相匹配。

根据你的具体需求，你可能需要对上述代码进行适当的调整。如果需要更详细的指导，请提供更多的SVG结构和代码示例。