Html：显示带有可挖掘边的六边形进度条

Question

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

其中每一边代表一些数据A.在每边悬停时，我想显示一个工具提示“A is is done”。我怎样才能做到这一点？

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

这就是我使用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，即使在所有方面都添加了onhover。我想向每一方添加单独的事件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>

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