Как изменить положение SVG при наведении с задержкой перехода

Question

Я пытаюсь переместить значки SVG в моей панели навигации влево при наведении, что я могу сделать, но мне нужно, чтобы элемент плавно перемещался через что-то вроде этого transition : all .5s; Проблема в том, что тег svg не принимает свойство перехода в css, поэтому я попытался использовать переход на контейнере, но это не работает, он просто перемещается мгновенно без эффекта перехода.

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 в браузере, что приводит к следующему:

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

Также у меня есть другой значок SVG, который имеет путь тег вместо многоугольник

CSS :

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

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

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

Я попытался применить переход и атрибут "left" к элементам path и polygon, но в этот момент ничего не происходит, они даже не перемещаются.

Answer 1

Вы пытаетесь установить атрибут left для элемента с позицией static. Попробуйте использовать отрицательную маржу. Также вы применяете переход к неправильному элементу.

---

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>

эквивалент scss:

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