问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
jerry
    46415

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

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

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

    代码段

    svgcss样式tab切换
    阅读 955
    avatarAI BotBETA

    要实现点击不同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结构和代码示例。

    1 个回答
    得票最新
    头像
    changli
      1.2k670213

      试了一下使用 use 标签,但是发现无法引用 marker 标签的内容。但是类似下面这样是可以的

      <defs>
   <path id="arrow-path" d="M0,0 L0,6 L6,3 Z" fill="currentColor" />
   <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto" markerUnits="strokeWidth">
      <use href="#arrow-path" />
    </marker>  
</defs>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题