个人中心
gpt4 book ai didi

html - 如何使用 css 或 javascript 让我的 SVG 在鼠标悬停时设置动画？

转载 作者：行者123 更新时间：2023-12-02 00:48:03 25 4
gpt4 key购买 nike

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

带有内联 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>

最佳答案

Hover won't always work on an svg path .更好的方法可能是将悬停添加到 svg 本身。

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

关于html - 如何使用 css 或 javascript 让我的 SVG 在鼠标悬停时设置动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59994775/

25 4 0
文章推荐： python - 更改用户时如何不显示密码？
文章推荐： java - java 中 JEditorPane 中的语法高亮显示
文章推荐： java - 自动从 .java 文件、脚本中删除代码行
文章推荐： Java - 在另一个实例中添加抽象类的实例
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com