Как изменить по событию hover , path в svg?

#svg #hover

Собственно сам вопрос в заголовке 









Имеется такой hexagon а svg и в соответствии с макетом на нём должен произойти hover
и по этому событию должно произойти увеличение тёмного элемента, я всё сделал за исключением
hover.

Как мне раньше объясняли что должно быть одинаковое ко-во точек и именно это условие
я предусмотрел ..

Как в этом случае сделать так что бы было как во втором hexagon ?
    

Ответы

Ответ 1

#pouring {
  transition: 1s;
}

#hexagon:hover #pouring {
 d: path("m 85.620408,182.81115 0.753717,-46.40922 46.976195,-22.64163 46.22247,23.76759
-0.75372,46.40922 -46.97619,22.64164 z");
 d: "m 85.620408,182.81115 0.753717,-46.40922 46.976195,-22.64163 46.22247,23.76759
-0.75372,46.40922 -46.97619,22.64164 z";
 transform: translate(-55px, -17px);
}