时间戳

首页 > 解决方案 > 悬停时的 SVG 不进行过渡

html - 悬停时的 SVG 不进行过渡

问题描述

我正在尝试为需要更改 svg 路径的 SVG 设置动画。虽然当时我在 svg 上悬停，但路径发生了变化，但悬停时的转换不起作用。我需要在悬停时进行平滑过渡。

.btn {
  width: 200px;
  height: 48px;
  text-align: center;
  background-color: red;
  display: block;
  padding: 40px 20px;
  transition: all 0.5s
}

svg path {
  transition: d 0.8s;
  transition: all 0.5s
}

.btn:hover svg #ab {
  d: path("M11.5 1C11.5 0.723858 11.2761 0.5 11 0.5C10.7239 0.5 10.5 0.723858 10.5 1V10.5H1C0.723858 10.5 0.5 10.7239 0.5 11C0.5 11.2761 0.723858 11.5 1 11.5H10.5V21C10.5 21.2761 10.7239 21.5 11 21.5C11.2761 21.5 11.5 21.2761 11.5 21V11.5H21C21.2761 11.5 21.5 11.2761 21.5 11C21.5 10.7239 21.2761 10.5 21 10.5H11.5V1Z");
  d: "M11.5 1C11.5 0.723858 11.2761 0.5 11 0.5C10.7239 0.5 10.5 0.723858 10.5 1V10.5H1C0.723858 10.5 0.5 10.7239 0.5 11C0.5 11.2761 0.723858 11.5 1 11.5H10.5V21C10.5 21.2761 10.7239 21.5 11 21.5C11.2761 21.5 11.5 21.2761 11.5 21V11.5H21C21.2761 11.5 21.5 11.2761 21.5 11C21.5 10.7239 21.2761 10.5 21 10.5H11.5V1Z";
}
<a href="#" class="btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none" id="svg-ax">
        <g class="main-arrow">
            <path class="arrow-changes" id="ab" fill-rule="evenodd" clip-rule="evenodd"
                d="M11.3536 0.646447C11.1583 0.451184 10.8417 0.451184 10.6464 0.646447C10.4512 0.841709 10.4512 1.15829 10.6464 1.35355L19.7929 10.5H1C0.723858 10.5 0.5 10.7239 0.5 11C0.5 11.2761 0.723858 11.5 1 11.5H19.7929L10.6464 20.6464C10.4512  20.8417 10.4512 21.1583 10.6464 21.3536C10.8417 21.5488 11.1583 21.5488 11.3536 21.3536L21.3536 11.3536L21.7071 11L21.3536 10.6464L11.3536 0.646447Z"
                fill="black" />
        </g>
    </svg>
</a>

我正在提供我编写代码的 codepen 链接。 https://codepen.io/bhavik1996/pen/oNzmBjR

标签： htmlcssanimationsvghover

解决方案

您的动画的问题是您的 SVG 在 CSS 上的点数与它在 HTML 中的点数不同。

<path class="arrow-changes" id="ab" fill-rule="evenodd" clip-rule="evenodd"
                    d="M31.181,8.504l28.56,22.677l-28.56,22.677"
                    stroke="black" />

和CSS：

        .btn:hover svg path  {
            d: path("M31.181,8.504l0.72,22.677l-0.72,22.677");

我在codepen上做了一个非常简单的例子：

https://codepen.io/jaffa80/pen/poEGRBx

例如，要画直线，通常只需要两个点，但要将直线动画化成箭头，直线也必须有 3 个点。

简而言之，计算两条路径中的逗号。每个中应该有相同的数字。

希望这是有道理的。

推荐阅读