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>

我还有另一个带有 path 标记而不是 polygon

的svg图标

CSS ：

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

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

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

我尝试将路径和多边形元素的过渡效果和“ left”属性应用于路径和多边形元素，但是此时什么也没有发生，甚至不动。

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

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

1 个答案: