个人中心
gpt4 book ai didi

css - 为什么我的 svg 动画不起作用？

转载 作者：太空宇宙 更新时间：2023-11-04 01:13:15 26 4
gpt4 key购买 nike

我有这个 svg，我已经尝试制作动画大约两周了......

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   id="svg1"
   version="1.1"
   viewBox="49.595489 30.040314 84.135223 84.305336"
   height="84.305336mm"
   width="84.135223mm">


    <defs>
        <style>
            .logo{
                stroke-dasharray: 800;
                stroke-dashoffset: 0;
                -webkit-animation: dash 2s linear forwards;         
            }

            @-webkit-keyframes dash {
                from {
                    stroke-dashoffset: 800;
                }
                to {
                    stroke-dashoffset: 0;
                }
            }
        </style>
    </defs>

  <path class="logo"
     id="logo"
     d="m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"

     style="fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

</svg>

我按照 this video 中的说明进行操作。甚至尝试像他在视频中那样通过从 path 中复制粘贴 style 来添加额外的 style 行。我不确定这些属性的位置是否有所不同。

<style type = "txt/css">
        .logo{fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1}

但它没有用 :( 如果我离开上面的行并从 path 中删除 style，所有属性都会丢失，所以我想它不能按照他在视频中的方式引用它们。我不确定这次出了什么问题。

html源码就是

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta http-equip="X-UA-Compatible" content="IE=edge, chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

              <title> SVG Line Animation Demo</title>
    </head>

    <body>
        <div style = "text-align: center; padding: 150px 0;">
            <object>
                <embed src="path.svg">
            </object>
        </div>
    </body>
</html>

最佳答案

您在路径上设置的 stroke-dasharray:none 会覆盖并阻止动画。删除修复它。

我还删除了 webkit 位，因此它现在应该可以在更多浏览器上运行。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" id="svg1" version="1.1" viewBox="49.595489 30.040314 84.135223 84.305336" height="84.305336mm" width="84.135223mm">
    	
    	
    	<defs>
    		<style>
    			.logo{
    				stroke-dasharray: 800;
    				stroke-dashoffset: 0;
    				animation: dash 2s linear forwards;			
    			}
    			
    			@keyframes dash {
    				from {
    					stroke-dashoffset: 800;
    				}
    				to {
    					stroke-dashoffset: 0;
    				}
    			}
    		</style>
    	</defs>
    	
      <path class="logo"
         id="logo"
         d="m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"
    		
         style="fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
    
    </svg>

关于css - 为什么我的 svg 动画不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50763489/

26 4 0
文章推荐： c++ - 如何使用具有负索引的(2d)数组？
文章推荐： javascript - 在 Mongoose 模式中将一个数组写入另一个数组中
文章推荐： c - C 中的左值查询
文章推荐： 使用 GCC 交叉编译 C 应用程序
太空宇宙
个人简介

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

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