Возможно ли поменять цвет у данного SVG элемента?

#css #svg

Имеется такая SVG иконка анимированная, возможно ли поменять ее цвет? Пробовал менять
свойство fill у самого SVG элемента, не вышло, пробовал менять свойство stroke у .line,
тоже результата нет, если меняю свойство fill у .line то появляются кракозябры. В чем
проблема тут?



.ham3 {
  fill: #fff;
}

.ham3 .top {
  stroke-dasharray: 40 130;
}
.ham3 .middle {
  stroke-dasharray: 40 140;
}
.ham3 .bottom {
  stroke-dasharray: 40 205;
}
.ham3.active .top {
  stroke-dasharray: 75 130;
  stroke-dashoffset: -63px;
}
.ham3.active .middle {
  stroke-dashoffset: -102px;
}
.ham3.active .bottom {
  stroke-dasharray: 110 205;
  stroke-dashoffset: -86px;
}

.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#000;
  stroke-width:5.5;
  stroke-linecap:round;
}




    

Ответы

Ответ 1

При смене stroke вроде как все вполне меняется:



.ham3 {
  fill: #fff;
}

.ham3 .top {
  stroke-dasharray: 40 130;
}
.ham3 .middle {
  stroke-dasharray: 40 140;
}
.ham3 .bottom {
  stroke-dasharray: 40 205;
}
.ham3.active .top {
  stroke-dasharray: 75 130;
  stroke-dashoffset: -63px;
}
.ham3.active .middle {
  stroke-dashoffset: -102px;
}
.ham3.active .bottom {
  stroke-dasharray: 110 205;
  stroke-dashoffset: -86px;
}

.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#0f0;
  stroke-width:5.5;
  stroke-linecap:round;
}