如何以过渡延迟更改svg在悬停时的位置

Question

I'm trying to move svg icons in my navbar to the left on hovering, which I'm able to do so, but I need the element to move smoothly through something like this transition : all .5s; The issue is that svg tag doesn't accept transition property in css, so I tried to use the transition on the container, but that doesn't work, it just move instantly without transition effect.

HTML :

  <div id="sidenav-icon-section">
            <li>
                <a href="/">
                    <img src="/assets/images/home.svg" alt="home" onload="SVGInject(this)">
                </a>
          </li>
   </div>

I use the SVGInject library to transform my svg code in the browser, which results to this :

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" data-inject-url="http://localhost:4200/assets/images/home.svg" _ngcontent-c1="">

<polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="32,3 2,33 11,33 11,63 23,63 23,47 39,47   39,63 51,63 51,33 62,33 "></polygon></svg>

Also I have another svg icon that has a path tag instead of polygon

CSS :

  #sidenav-icon-section {
    top: 25%;
    position: relative;

    li {
      position: relative;
      transition: all .5s;

      &:hover svg {
        left: 7%;
      }
    }
  }

I tried applying the transition to and the "left" attribute to path and polygon elements but nothing happens at that point, they don't even move.

Answer 1

You are trying to set the attribute left on an element which position is static . Try a negative margin instead. Also you are applying the transition to the wrong element.

---

 svg { transition: margin-left .5s } li:hover svg { margin-left: -7px; } 

 <ul id="sidenav-icon-section"> <li class="item"> <a href="/"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" data-inject-url="http://localhost:4200/assets/images/home.svg" _ngcontent-c1=""> <polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="32,3 2,33 11,33 11,63 23,63 23,47 39,47 39,63 51,63 51,33 62,33 "></polygon></svg> </a> </li> </ul> 

the scss equivalent:

li {
  svg { transition: margin-left .5s; }
  &:hover svg {
    margin-left: -7px;
  }
}