How to change position of svg on hover with a transition delay - html

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