Html: для отображения шестигранной прогрессбар с перемещаемыми сторонами

Question

Я хотел бы отобразить индикатор прогресса шестиугольника, как показано ниже на моей странице.

, где каждая сторона представляет некоторые данные 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 выше, это добавит даже со всех сторон.Я хочу добавить отдельное событие 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>

Чтобы увидеть подсказку, удерживайте курсор некоторое время на стороне шестиугольника.