如何使用css或javascript使我的SVG在鼠标悬停上进行动画处理？

问题描述 投票：3回答：3

我正在尝试使轮廓填充在悬停时跟踪灰色轮廓，而当鼠标移开时则相反。无论出于何种原因，我现在使用的方法都无法在任何浏览器上使用。有人有什么想法吗？

带有嵌入式SVG文件的HTML

带有我要设置动画的类的CSS单独文件

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    text-align: center;
}



.SVG-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
}



.left {
    display: inline;
    fill: #0074BC;
}
.right {
    display: inline;
    fill: #00C2F3;
}

.outline-fill {
    fill: none;
    stroke:#25346A;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: dash 2s linear forwards;
    stroke-width:1.5;
    stroke-linecap: round;
    stroke-miterlimit: 0;
    animation-play-state: paused;
}

.outline-fill:hover {
    animation-play-state: running;
}

@keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }

.stroke {
    display: inline;
    fill: none;
    stroke: #9b9a9a;
    stroke-width: 1.0;
    stroke-linecap:round;
    stroke-miterlimit:10;
}

#fill {
    z-index: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="./style.css"> 
    <title>Animated SVG Icon</title>
</head>
<body>
    <header>
        <h1>Animated SVG "Contact Us" icon on hover:</h1>
    </header>
    <div class="SVG-container">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 117.1 76.5" style="enable-background:new 0 0 117.1 76.5;" xml:space="preserve">
        <g id="fill" class="fill-group">
            <path id="left-bubble" class="left" d="M52,8.4c-22.6,0-40.8,12.2-40.8,27.3c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2
                c-1,3.8-3.6,6.6-5.8,8.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1
                c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4z M37.8,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C42.8,39.2,40.6,41.5,37.8,41.5z M52,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C57.1,39.2,54.9,41.5,52,41.5z M66.4,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C71.5,39.2,69.2,41.5,66.4,41.5z"/>
            <path id="right-bubble" class="right" d="M95.2,63.3c7.3-3,12.2-8.3,12.2-14.5c0-5.4-3.8-10.1-9.6-13.2C97,35.2,96,35.8,96,36.7
                c0,0.1,0,0.1,0,0.2c0,12-10.7,22.4-26,26.8c3.6,1.3,7.7,2.1,12.1,2.1c2.4,0,4.7-0.2,7-0.6c0.3-0.1,0.5,0.1,0.7,0.3
                c1.2,1.7,3.4,4.2,6.4,5.1c0.5,0.2,0.9-0.5,0.6-0.9c-1-1.3-2.3-3.4-2-5.7C94.7,63.6,94.9,63.4,95.2,63.3z"/>
            </g>
           <g id="outline-group">
           <path id="outline" class="stroke" d="M20.5,63.9c-0.5,0.5-1,0.9-1.4,1.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6
               c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4c-22.6,0-40.8,12.2-40.8,27.3
               c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2c-0.1,0.3-0.3,1.3-0.9,2.2 M22.6,61.6L22.6,61.6 M33.3,38.8
               c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M42.2,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1
               c-0.9,0-1.7-0.2-2.4-0.6 M47.6,38.8c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M56.5,34
               c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6 M61.9,38.8c-0.4-0.7-0.6-1.5-0.6-2.4
               c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M70.9,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6
                M96,36.9C96,36.9,96,36.9,96,36.9c0-1,1.1-1.7,2-1.3c5.8,3.1,9.5,7.8,9.5,13.2c0,1.2-0.2,2.4-0.6,3.6 M105.7,55
               c0.1-0.1,0.1-0.1,0.1-0.1 M104.2,57.1c-2.1,2.6-5.3,4.7-9,6.3c-0.3,0.1-0.5,0.3-0.5,0.6c-0.3,2.3,1,4.4,2,5.7
               c0.3,0.4-0.1,1-0.6,0.9c-3-0.9-5.2-3.4-6.4-5.1c-0.2-0.2-0.4-0.3-0.7-0.3c-2.2,0.4-4.5,0.6-7,0.6c-0.9,0-1.8,0-2.7-0.1 M76.2,65.3
               c-2.4-0.3-4.2-0.8-6.3-1.6"/>

<!-- This is the part I'm trying to animate on hover -->
           <path class="outline-fill" d="M20.5,63.9c-0.5,0.5-1,0.9-1.4,1.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6
               c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4c-22.6,0-40.8,12.2-40.8,27.3
               c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2c-0.1,0.3-0.3,1.3-0.9,2.2 M22.6,61.6L22.6,61.6 M33.3,38.8
               c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M42.2,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1
               c-0.9,0-1.7-0.2-2.4-0.6 M47.6,38.8c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M56.5,34
               c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6 M61.9,38.8c-0.4-0.7-0.6-1.5-0.6-2.4
               c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M70.9,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6
                M96,36.9C96,36.9,96,36.9,96,36.9c0-1,1.1-1.7,2-1.3c5.8,3.1,9.5,7.8,9.5,13.2c0,1.2-0.2,2.4-0.6,3.6 M105.7,55
               c0.1-0.1,0.1-0.1,0.1-0.1 M104.2,57.1c-2.1,2.6-5.3,4.7-9,6.3c-0.3,0.1-0.5,0.3-0.5,0.6c-0.3,2.3,1,4.4,2,5.7
               c0.3,0.4-0.1,1-0.6,0.9c-3-0.9-5.2-3.4-6.4-5.1c-0.2-0.2-0.4-0.3-0.7-0.3c-2.2,0.4-4.5,0.6-7,0.6c-0.9,0-1.8,0-2.7-0.1 M76.2,65.3
               c-2.4-0.3-4.2-0.8-6.3-1.6"/>
       </g>

       </svg>
    </div>
</body>
</html>
html css animation svg
3个回答
1
投票

Hover won't always work on an svg path。更好的方法可能是将鼠标悬停在svg本身上。

svg:hover .outline-fill {
  animation-play-state: running;
}
1
投票

由于fill:none。

从本质上讲，它使路径对hover变得不可见。

解决方法是将其更改为fill:transparent。

.SVG-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-right: auto;
  margin-left: auto;
}

.left {
  display: inline;
  fill: #0074BC;
}

.right {
  display: inline;
  fill: #00C2F3;
}

.outline-fill {
  fill: transparent;
  stroke: #25346A;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: dash 2s linear forwards;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-miterlimit: 0;
  animation-play-state: paused;
}

.outline-fill:hover {
  animation-play-state: running;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.stroke {
  display: inline;
  fill: none;
  stroke: #9b9a9a;
  stroke-width: 1.0;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

#fill {
  z-index: 0;
}
<div class="SVG-container">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 117.1 76.5" style="enable-background:new 0 0 117.1 76.5;" xml:space="preserve">
        <g id="fill" class="fill-group">
            <path id="left-bubble" class="left" d="M52,8.4c-22.6,0-40.8,12.2-40.8,27.3c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2
                c-1,3.8-3.6,6.6-5.8,8.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1
                c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4z M37.8,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C42.8,39.2,40.6,41.5,37.8,41.5z M52,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C57.1,39.2,54.9,41.5,52,41.5z M66.4,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C71.5,39.2,69.2,41.5,66.4,41.5z"/>
            <path id="right-bubble" class="right" d="M95.2,63.3c7.3-3,12.2-8.3,12.2-14.5c0-5.4-3.8-10.1-9.6-13.2C97,35.2,96,35.8,96,36.7
                c0,0.1,0,0.1,0,0.2c0,12-10.7,22.4-26,26.8c3.6,1.3,7.7,2.1,12.1,2.1c2.4,0,4.7-0.2,7-0.6c0.3-0.1,0.5,0.1,0.7,0.3
                c1.2,1.7,3.4,4.2,6.4,5.1c0.5,0.2,0.9-0.5,0.6-0.9c-1-1.3-2.3-3.4-2-5.7C94.7,63.6,94.9,63.4,95.2,63.3z"/>
            </g>
           <g id="outline-group">
           <path id="outline" class="stroke" d="M20.5,63.9c-0.5,0.5-1,0.9-1.4,1.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6
               c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4c-22.6,0-40.8,12.2-40.8,27.3
               c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2c-0.1,0.3-0.3,1.3-0.9,2.2 M22.6,61.6L22.6,61.6 M33.3,38.8
               c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M42.2,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1
               c-0.9,0-1.7-0.2-2.4-0.6 M47.6,38.8c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M56.5,34
               c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6 M61.9,38.8c-0.4-0.7-0.6-1.5-0.6-2.4
               c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M70.9,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6
                M96,36.9C96,36.9,96,36.9,96,36.9c0-1,1.1-1.7,2-1.3c5.8,3.1,9.5,7.8,9.5,13.2c0,1.2-0.2,2.4-0.6,3.6 M105.7,55
               c0.1-0.1,0.1-0.1,0.1-0.1 M104.2,57.1c-2.1,2.6-5.3,4.7-9,6.3c-0.3,0.1-0.5,0.3-0.5,0.6c-0.3,2.3,1,4.4,2,5.7
               c0.3,0.4-0.1,1-0.6,0.9c-3-0.9-5.2-3.4-6.4-5.1c-0.2-0.2-0.4-0.3-0.7-0.3c-2.2,0.4-4.5,0.6-7,0.6c-0.9,0-1.8,0-2.7-0.1 M76.2,65.3
               c-2.4-0.3-4.2-0.8-6.3-1.6"/>

<!-- This is the part I'm trying to animate on hover -->
           <path class="outline-fill" d="M20.5,63.9c-0.5,0.5-1,0.9-1.4,1.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6
               c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4c-22.6,0-40.8,12.2-40.8,27.3
               c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2c-0.1,0.3-0.3,1.3-0.9,2.2 M22.6,61.6L22.6,61.6 M33.3,38.8
               c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M42.2,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1
               c-0.9,0-1.7-0.2-2.4-0.6 M47.6,38.8c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M56.5,34
               c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6 M61.9,38.8c-0.4-0.7-0.6-1.5-0.6-2.4
               c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M70.9,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6
                M96,36.9C96,36.9,96,36.9,96,36.9c0-1,1.1-1.7,2-1.3c5.8,3.1,9.5,7.8,9.5,13.2c0,1.2-0.2,2.4-0.6,3.6 M105.7,55
               c0.1-0.1,0.1-0.1,0.1-0.1 M104.2,57.1c-2.1,2.6-5.3,4.7-9,6.3c-0.3,0.1-0.5,0.3-0.5,0.6c-0.3,2.3,1,4.4,2,5.7
               c0.3,0.4-0.1,1-0.6,0.9c-3-0.9-5.2-3.4-6.4-5.1c-0.2-0.2-0.4-0.3-0.7-0.3c-2.2,0.4-4.5,0.6-7,0.6c-0.9,0-1.8,0-2.7-0.1 M76.2,65.3
               c-2.4-0.3-4.2-0.8-6.3-1.6"/>
       </g>

       </svg>
</div>
0
投票

在不进行悬停时尝试尽最大的努力来使动画反向，但可以在加载页面时从动画开始进行动画

body {
  font-family: 'Open Sans', sans-serif;
}

h1 {
  text-align: center;
}

.SVG-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-right: auto;
  margin-left: auto;
}

.left {
  display: inline;
  fill: #0074BC;
}

.right {
  display: inline;
  fill: #00C2F3;
}

.outline-fill {
  fill: none;
  stroke: #25346A;
  stroke-dasharray: 400;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-miterlimit: 0;
}

.SVG-container:hover .outline-fill {
  stroke-dashoffset: 0;
  animation: dash 2s linear;
}

.SVG-container:not(:hover) .outline-fill {
  stroke-dashoffset: 400;
  animation: undash 2s linear;
}

@keyframes dash {
  from {
    stroke-dashoffset: 400;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes undash {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 400;
  }
}

.stroke {
  display: inline;
  fill: none;
  stroke: #9b9a9a;
  stroke-width: 1.0;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

#fill {
  z-index: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="./style.css">
  <title>Animated SVG Icon</title>
</head>

<body>
  <header>
    <h1>Animated SVG "Contact Us" icon on hover:</h1>
  </header>
  <div class="SVG-container">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 117.1 76.5" style="enable-background:new 0 0 117.1 76.5;" xml:space="preserve">
        <g id="fill" class="fill-group">
            <path id="left-bubble" class="left" d="M52,8.4c-22.6,0-40.8,12.2-40.8,27.3c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2
                c-1,3.8-3.6,6.6-5.8,8.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1
                c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4z M37.8,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C42.8,39.2,40.6,41.5,37.8,41.5z M52,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C57.1,39.2,54.9,41.5,52,41.5z M66.4,41.5c-2.8,0-5.1-2.3-5.1-5.1c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1
                C71.5,39.2,69.2,41.5,66.4,41.5z"/>
            <path id="right-bubble" class="right" d="M95.2,63.3c7.3-3,12.2-8.3,12.2-14.5c0-5.4-3.8-10.1-9.6-13.2C97,35.2,96,35.8,96,36.7
                c0,0.1,0,0.1,0,0.2c0,12-10.7,22.4-26,26.8c3.6,1.3,7.7,2.1,12.1,2.1c2.4,0,4.7-0.2,7-0.6c0.3-0.1,0.5,0.1,0.7,0.3
                c1.2,1.7,3.4,4.2,6.4,5.1c0.5,0.2,0.9-0.5,0.6-0.9c-1-1.3-2.3-3.4-2-5.7C94.7,63.6,94.9,63.4,95.2,63.3z"/>
            </g>
           <g id="outline-group">
           <path id="outline" class="stroke" d="M20.5,63.9c-0.5,0.5-1,0.9-1.4,1.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6
               c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4c-22.6,0-40.8,12.2-40.8,27.3
               c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2c-0.1,0.3-0.3,1.3-0.9,2.2 M22.6,61.6L22.6,61.6 M33.3,38.8
               c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M42.2,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1
               c-0.9,0-1.7-0.2-2.4-0.6 M47.6,38.8c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M56.5,34
               c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6 M61.9,38.8c-0.4-0.7-0.6-1.5-0.6-2.4
               c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M70.9,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6
                M96,36.9C96,36.9,96,36.9,96,36.9c0-1,1.1-1.7,2-1.3c5.8,3.1,9.5,7.8,9.5,13.2c0,1.2-0.2,2.4-0.6,3.6 M105.7,55
               c0.1-0.1,0.1-0.1,0.1-0.1 M104.2,57.1c-2.1,2.6-5.3,4.7-9,6.3c-0.3,0.1-0.5,0.3-0.5,0.6c-0.3,2.3,1,4.4,2,5.7
               c0.3,0.4-0.1,1-0.6,0.9c-3-0.9-5.2-3.4-6.4-5.1c-0.2-0.2-0.4-0.3-0.7-0.3c-2.2,0.4-4.5,0.6-7,0.6c-0.9,0-1.8,0-2.7-0.1 M76.2,65.3
               c-2.4-0.3-4.2-0.8-6.3-1.6"/>

<!-- This is the part I'm trying to animate on hover -->
           <path class="outline-fill" d="M20.5,63.9c-0.5,0.5-1,0.9-1.4,1.3c-0.8,0.6-0.2,1.9,0.8,1.8c7.8-0.6,12.9-3.8,15.6-6
               c0.3-0.2,0.6-0.3,1-0.2c4.8,1.3,10.1,2.1,15.6,2.1c22.6,0,40.8-12.2,40.8-27.3S74.6,8.4,52,8.4c-22.6,0-40.8,12.2-40.8,27.3
               c0,7.9,5.1,15.1,13.2,20c0.4,0.2,0.6,0.7,0.5,1.2c-0.1,0.3-0.3,1.3-0.9,2.2 M22.6,61.6L22.6,61.6 M33.3,38.8
               c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M42.2,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1
               c-0.9,0-1.7-0.2-2.4-0.6 M47.6,38.8c-0.4-0.7-0.6-1.5-0.6-2.4c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M56.5,34
               c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6 M61.9,38.8c-0.4-0.7-0.6-1.5-0.6-2.4
               c0-2.8,2.3-5.1,5.1-5.1c0.9,0,1.7,0.2,2.4,0.6 M70.9,34c0.4,0.7,0.6,1.5,0.6,2.4c0,2.8-2.3,5.1-5.1,5.1c-0.9,0-1.7-0.2-2.4-0.6
                M96,36.9C96,36.9,96,36.9,96,36.9c0-1,1.1-1.7,2-1.3c5.8,3.1,9.5,7.8,9.5,13.2c0,1.2-0.2,2.4-0.6,3.6 M105.7,55
               c0.1-0.1,0.1-0.1,0.1-0.1 M104.2,57.1c-2.1,2.6-5.3,4.7-9,6.3c-0.3,0.1-0.5,0.3-0.5,0.6c-0.3,2.3,1,4.4,2,5.7
               c0.3,0.4-0.1,1-0.6,0.9c-3-0.9-5.2-3.4-6.4-5.1c-0.2-0.2-0.4-0.3-0.7-0.3c-2.2,0.4-4.5,0.6-7,0.6c-0.9,0-1.8,0-2.7-0.1 M76.2,65.3
               c-2.4-0.3-4.2-0.8-6.3-1.6"/>
       </g>

       </svg>
  </div>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.