javascript - HTML : to display hexagon progressbar with hoverable sides

Question

我想在我的页面中显示如下所示的六边形进度条。

每一边代表一些数据 A。在每一边悬停时，我想显示一个工具提示，说“A 已完成”。我怎样才能做到这一点？

我尝试了 SVG 和 hexagonprogressbar.js .我可以创建六边形，但我无法弄清楚如何为每一边添加悬停效果。任何帮助将不胜感激。

这就是我使用 svg 创建六边形的方式 <path>

<path id="id67441526994471690" d="M150 0 L285 75 L285 225 L150 300 L15 225 L15 75 L150 0" stroke="rgb(49, 120, 115)" stroke-width="35" fill="transparent" stroke-linecap="round" stroke-dasharray="2160" mask="url(#id67441526994471690)"></path>

如果我添加 onhover在上面，它甚至在所有方面都增加了悬停。我想在每一侧添加单独的悬停事件。

Hexagonprogressbar.js 创建相同类型的 svg。

Answer 1

我用 6 条线画了一个六边形，这样就可以使六边形的边独立。当您将鼠标悬停在六边形工具提示的每一侧时。

工具提示由命令 svg <title> 提供

polyline:hover {
stroke:orange;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="350" height="350" viewBox="0 0 80 80"  >  
     <rect width="100%" height="100%" fill="#233340" />	
	
	<g  transform="translate(7 7) rotate(90 32 32)" stroke="#317873" stroke-width="5" stroke-linecap="round">
	<title>A is done </title>
	<polyline id="p1" points="16 4.29, 48.5 4.29" />
	<polyline id="p2" points="48 4.29, 64 32" />
	<polyline id="p3" points="64 32, 48 59.71" />
	<polyline id="p4" points="48 59.71, 16 59.71" />
	<polyline id="p5" points="16 59.71, 0 32" />
	<polyline id="p6" points="0 32, 16 4.29" /> 
	</g>
	
	<text x="25" y="35" font-size="12" fill="#fff" font-family="sans-serif"> Linux</text>
	<text x="27" y="50" font-size="10" fill="#fff" font-family="sans-serif"> 100%</text>
	
	 </svg>

要查看工具提示，请将光标在六边形的一侧按住一会儿。