SVG图标栏在使用css的汉堡图标活动时变为X

Question

我正在尝试使用 SVG 栏图标在使用 CSS 处于活动状态时转为交叉，如果有人指出我正确的方向，我不知道哪里出了问题。我尝试过的代码提供了codepen，请有人在给我很多时间但仍然没有得到的情况下帮助我。

提前致谢

/* Humburger */
.hamburger .bar:before {
  width: 80%;
  position: absolute;
  -webkit-transform: translate(-20%, -45%);
  -ms-transform: translate(-20%, -45%);
  transform: translate(-20%, -45%);
  content: url(http://localhost/verticalmenu/wp-content/uploads/2020/11/hum-she.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transition: all 0.5s linear;
  z-index: 9999;
}
.hamburger:hover .bar:before {
  opacity: 0.7;
}
.hamburger.active svg:after{
  position: absolute;
  -webkit-transform: translate(-20%, -45%);
  -ms-transform: translate(-20%, -45%);
  transform: translate(-20%, -45%);
  content: url(http://localhost/verticalmenu/wp-content/uploads/2020/11/cross-black-1.svg);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 9999;
}

<div class="hamburger active">
  <svg class="bar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30pt" height="30pt" viewBox="0 0 30 30"><g id="surface21821197"><path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 3 7 C 2.640625 6.996094 2.304688 7.183594 2.121094 7.496094 C 1.941406 7.808594 1.941406 8.191406 2.121094 8.503906 C 2.304688 8.816406 2.640625 9.003906 3 9 L 27 9 C 27.359375 9.003906 27.695312 8.816406 27.878906 8.503906 C 28.058594 8.191406 28.058594 7.808594 27.878906 7.496094 C 27.695312 7.183594 27.359375 6.996094 27 7 Z M 3 14 C 2.640625 13.996094 2.304688 14.183594 2.121094 14.496094 C 1.941406 14.808594 1.941406 15.191406 2.121094 15.503906 C 2.304688 15.816406 2.640625 16.003906 3 16 L 27 16 C 27.359375 16.003906 27.695312 15.816406 27.878906 15.503906 C 28.058594 15.191406 28.058594 14.808594 27.878906 14.496094 C 27.695312 14.183594 27.359375 13.996094 27 14 Z M 3 21 C 2.640625 20.996094 2.304688 21.183594 2.121094 21.496094 C 1.941406 21.808594 1.941406 22.191406 2.121094 22.503906 C 2.304688 22.816406 2.640625 23.003906 3 23 L 27 23 C 27.359375 23.003906 27.695312 22.816406 27.878906 22.503906 C 28.058594 22.191406 28.058594 21.808594 27.878906 21.496094 C 27.695312 21.183594 27.359375 20.996094 27 21 Z M 3 21 "></path></g></svg>
</div>

Answer 1

简单

var svg = document.querySelector("#svg"),
 line1 = document.querySelector("#line1"),
 line2 =document.querySelector("#line2"),
 line3 = document.querySelector("#line3")
 
 svg.onclick = ()=>{
    line1.setAttribute("y2", "22")
    line2.style.display="none"
    line3.setAttribute("y2", "0")
   //line1.style="transform:rotate(5);"
 }

<svg style="cursor:pointer" id="svg" height="150" width="500">
  <line id="line1" x1="0" y1="2.5" x2="40" y2="2.5" style="stroke:rgb(255,0,0);stroke-width:5" />
  <line id="line2" x1="0" y1="12" x2="40" y2="12" style="stroke:rgb(255,0,0);stroke-width:5" />
  <line id="line3" x1="0" y1="22" x2="40" y2="22" style="stroke:rgb(255,0,0);stroke-width:5" />
</svg>