悬停时的 SVG 不进行过渡

Posted 2023-03-06

【中文标题】悬停时的 SVG 不进行过渡

【英文标题】：SVG on hover not taking Transition

【发布时间】：2021-04-22 10:25:54

【问题描述】：

我正在尝试为需要更改 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"   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

【问题讨论】：

您通常无法向 SVG 添加过渡。很多人说他们用 CSS 关键帧成功了，但我没有亲自尝试过。

【参考方案1】：

我用@keyframs 找到这个动画答案

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

    .btn:hover .arrow 
        animation: fram 0.2s ease alternate;
    

    @keyframes fram 
        0% 
            d: path("M11 1L21 11L11 21");
        

        25% 
            d: path("M11 1L19 11L11 21");
        

        50% 
            d: path("M11 1L16.5 11L11 21");
        

        75% 
            d: path("M11 1L14 11L11 21");
        

        100% 
            d: path("M11 1V11V21");
        
    
</style>

 <a href="#" class="btn">
    <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 22 22" fill="none" id="svg-ax">
        <path class="hori" d="M1 11H21" stroke="black" stroke-linecap="round" />
        <path class="arrow" d="M11 1L21 11L11 21" stroke="black" stroke-linecap="round" />
    </svg>
</a>

【参考方案2】：

动画的问题在于 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 个点。

简单地说，计算两条路径中的逗号。每个中的数字应该相同。

希望这是有道理的。

【讨论】：

感谢您的评论，这对我很有帮助