Html:显示带有可翻转边的六边形进度条

Question

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

其中每一侧代表一些数据A.在每侧悬停时,我想显示一个工具提示,说"A已完成".我怎样才能做到这一点？

我尝试过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>