HTML中使用SVG绘制曲线并实现点击高亮效果
下面是一个完整的HTML示例，使用SVG绘制多条曲线，并实现鼠标点击时高亮显示选中的曲线：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>SVG曲线点击高亮示例</title><style>body{font-family:Arial,sans-serif;display:flex;flex-direction:column;align-items:center;padding:20px;}h1{color:#333;}.container{margin-top:20px;border:1px solid #ddd;padding:10px;border-radius:5px;background-color:#f9f9f9;}svg{border:1px solid #ccc;background-color:white;}.info{margin-top:15px;font-style:italic;color:#666;}</style></head><body><h1>SVG曲线点击高亮示例</h1><p>点击任意一条曲线可以高亮显示它</p><divclass="container"><svgid="curveChart"width="600"height="400"viewBox="0 0 600 400"><!-- 定义渐变用于高亮效果 --><defs><linearGradientid="highlightGradient"x1="0%"y1="0%"x2="100%"y2="0%"><stopoffset="0%"style="stop-color:#ff9900;stop-opacity:1"/><stopoffset="100%"style="stop-color:#ff3300;stop-opacity:1"/></linearGradient></defs><!-- 背景网格线 --><pathd="M 50 0 V 400 M 150 0 V 400 M 250 0 V 400 M 350 0 V 400 M 450 0 V 400 M 550 0 V 400"stroke="#eee"stroke-width="1"/><pathd="M 0 50 H 600 M 0 150 H 600 M 0 250 H 600 M 0 350 H 600"stroke="#eee"stroke-width="1"/><!-- 曲线1 - 蓝色 --><pathid="curve1"class="curve"d="M 50 200 C 150 50, 250 350, 350 150 C 450 350, 550 50, 550 200"fill="none"stroke="#3498db"stroke-width="3"data-name="曲线1: 蓝色正弦波"/><!-- 曲线2 - 绿色 --><pathid="curve2"class="curve"d="M 50 100 C 150 300, 250 100, 350 300 C 450 100, 550 300, 550 100"fill="none"stroke="#2ecc71"stroke-width="3"data-name="曲线2: 绿色方波"/><!-- 曲线3 - 红色 --><pathid="curve3"class="curve"d="M 50 300 C 150 100, 250 300, 350 100 C 450 300, 550 100, 550 300"fill="none"stroke="#e74c3c"stroke-width="3"data-name="曲线3: 红色三角波"/></svg></div><divclass="info"id="curveInfo">点击一条曲线查看详细信息</div><script>document.addEventListener('DOMContentLoaded',function(){constcurves=document.querySelectorAll('.curve');constcurveInfo=document.getElementById('curveInfo');// 存储原始颜色constoriginalColors={};curves.forEach(curve=>{originalColors[curve.id]=curve.getAttribute('stroke');});// 为每条曲线添加点击事件curves.forEach(curve=>{curve.addEventListener('click',function(e){// 移除之前所有曲线的高亮类curves.forEach(c=>{c.setAttribute('stroke',originalColors[c.id]);});// 高亮当前曲线this.setAttribute('stroke','url(#highlightGradient)');this.setAttribute('stroke-width','4');// 显示曲线信息constname=this.getAttribute('data-name');curveInfo.textContent=`已选择:${name}`;// 阻止事件冒泡到SVG元素e.stopPropagation();});});// 可选：为SVG添加点击事件以取消高亮constsvg=document.getElementById('curveChart');svg.addEventListener('click',function(){// 重置所有曲线到原始状态curves.forEach(curve=>{curve.setAttribute('stroke',originalColors[curve.id]);curve.setAttribute('stroke-width','3');});curveInfo.textContent='点击一条曲线查看详细信息';});});</script></body></html>代码说明
SVG结构:
- 创建了一个600x400的SVG画布
- 添加了背景网格线作为参考
- 定义了三条不同类型的曲线（正弦波、方波、三角波）
高亮效果实现:
- 使用SVG的
<linearGradient>定义了一个渐变颜色 - 为每条曲线存储了原始颜色
- 点击曲线时：
- 重置所有曲线的颜色和宽度
- 为当前曲线应用渐变颜色和加粗效果
- 显示曲线信息
- 使用SVG的
交互功能:
- 点击曲线会高亮显示并显示信息
- 点击SVG空白区域会取消所有高亮
样式:
- 添加了基本的CSS样式使界面更美观
- 曲线使用不同颜色区分
自定义修改建议
- 要添加更多曲线，只需复制
<path>元素并修改d属性（定义曲线形状）和颜色 - 可以修改渐变颜色或使用纯色高亮（直接设置
stroke属性为固定颜色） - 可以添加动画效果使高亮更平滑
- 可以扩展为显示更多曲线信息或添加图例
这个示例提供了完整的交互功能，你可以根据需要进一步定制样式和功能。
