如何改变svg在悬停状态下的位置和转换延迟

我试图在悬停时将导航栏中的svg图标移到左边,我可以这样做,但是我需要元素平稳地移动到类似这样的地方 transition : all .5s; 问题是svg标签不接受css中的transition属性,所以我尝试在容器上使用转换,但这不起作用,它只是立即移动而没有转换效果。

HTML格式

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

我用 SVGInject公司

 <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>

路径 标记而不是

CSS :

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

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

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