我正在尝试使用我在 Google 上找到的 SVG 制作线条动画(小人冥想)。 我使用“SVG-edit”导入和导出它 - 所以我可以编辑代码。动画根本不起作用 - 与“shadow-root”有关吗？ 我在 Google inspect 上看到它说“shadow-root: closed”。我不知道这是什么意思，因为我今晚才开始学习 SVG。
站点的实时链接:http://benjaminthomasgibbs.co.uk/thirdEye.html
HTML:
<svg class="logo" width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<symbol viewBox="0 0 51.674 51.674" y="0px" x="0px" id="svg_2" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<path class="logoAni" fill="#fff" d="m51.378,42.158c-0.974,-1.539 -2.923,-2.291 -4.521,-2.977c-0.736,-0.314 -1.525,-0.547 -2.233,-0.921c-0.795,-0.42 -1.371,-1.366 -1.908,-2.048c-0.94,-1.194 -1.84,-2.42 -2.884,-3.529c-0.667,-0.71 -1.18,-1.443 -1.612,-2.32c-0.748,-1.519 -1.233,-3.172 -1.642,-4.811c-0.147,-0.596 -0.28,-1.196 -0.397,-1.799c-0.031,-0.164 -0.062,-0.329 -0.09,-0.495c-0.002,-0.021 -0.004,-0.031 -0.006,-0.041c-0.031,-0.272 -0.049,-0.547 -0.08,-0.819c-0.203,-1.749 -0.703,-3.386 -1.85,-4.749c-1.055,-1.254 -2.809,-2.561 -4.548,-2.274c-0.067,0.011 -0.12,0.036 -0.163,0.067c-0.264,0.122 -0.492,0.349 -0.702,0.527c-0.417,0.355 -0.843,0.69 -1.313,0.973c-1.519,0.913 -3.25,0.946 -4.907,0.398c-0.606,-0.2 -1.179,-0.484 -1.735,-0.795c-0.317,-0.177 -0.622,-0.373 -0.925,-0.573c-0.217,-0.144 -0.394,-0.304 -0.663,-0.32c-0.918,-0.054 -1.909,0.589 -2.591,1.13c-2.092,1.66 -2.214,4.428 -2.585,6.855c-0.218,1.425 -0.428,2.853 -0.801,4.247c-0.375,1.404 -1.021,2.652 -1.816,3.861c-0.82,1.248 -1.776,2.401 -2.735,3.545c-0.456,0.543 -0.916,1.084 -1.37,1.63c-0.467,0.562 -0.888,1.25 -1.501,1.661c-0.3,0.201 -0.703,0.267 -1.046,0.365c-0.368,0.105 -0.737,0.209 -1.106,0.31c-0.606,0.166 -1.229,0.289 -1.806,0.544c-0.624,0.275 -1.839,0.922 -1.842,1.736c-0.002,0.594 0.518,1.084 1.004,1.338c0.809,0.423 1.794,0.449 2.706,0.402c-0.045,0.933 0.096,1.848 0.572,2.674c0.537,0.932 1.464,1.592 2.387,2.102c2.497,1.381 5.427,1.255 8.183,1.456c1.549,0.112 3.08,0.338 4.634,0.407c1.62,0.072 3.243,0.062 4.862,0.045c3.272,-0.036 6.542,-0.02 9.812,-0.018c1.774,0 3.554,-0.002 5.328,-0.005c0.921,0 1.842,0 2.765,0c0.768,0.003 1.534,0.038 2.293,-0.118c1.191,-0.25 2.166,-1.065 2.791,-2.086c0.479,-0.789 0.605,-1.646 0.672,-2.521c0.168,-0.006 0.314,-0.092 0.344,-0.288c0.029,-0.209 0.033,-0.404 0.023,-0.591c0.715,0.214 1.487,0.303 2.18,0.016c0.416,-0.173 0.728,-0.477 0.953,-0.865c0.293,-0.505 0.164,-0.859 -0.131,-1.326zm-15.293,-18.941c-0.004,-0.022 -0.003,-0.016 0,0l0,0zm14.055,20.438c-0.642,0.219 -1.387,-0.004 -2.021,-0.25c-0.749,-1.441 -2.967,-1.97 -4.607,-2.102c-0.01,-0.008 -0.019,-0.021 -0.028,-0.027c-5.75,-3.775 -10.404,-9.9 -10.927,-16.93c-0.017,-0.203 -0.152,-0.323 -0.309,-0.365c-0.167,-0.06 -0.351,-0.023 -0.436,0.144c-0.021,0.033 -0.035,0.071 -0.045,0.114c0,0 0,0 0,0.001c-0.711,4.433 -0.541,9.032 -0.266,13.499c0.021,0.346 0,0.737 0.078,1.076c0.115,0.493 0.375,0.947 0.695,1.336c0.309,0.375 0.695,0.76 1.166,0.92c0.63,0.213 1.367,0.235 2.025,0.322c1.535,0.203 3.08,0.344 4.623,0.482c0.713,0.062 1.428,0.127 2.142,0.191c0.077,0 0.423,0 0.423,0s-0.346,0 -0.423,0c0.059,0.004 0.116,0.01 0.175,0.016c0.238,0.021 0.604,0.119 0.859,0.052c1.106,0.146 3.392,0.58 4.039,1.724c-0.119,1.249 -0.047,2.467 -0.731,3.588c-0.616,1.008 -1.675,1.602 -2.841,1.689c-0.75,0.057 -1.52,0.007 -2.271,0.007c-0.854,0 -1.711,0 -2.564,0.001c-1.645,0.001 -3.289,0.003 -4.934,0.002c-3.271,-0.002 -6.539,-0.016 -9.809,0.02c-0.745,0.01 -1.49,0.012 -2.234,0.007c-0.874,-0.212 -1.741,-0.565 -2.273,-1.265c-0.411,-0.539 -0.428,-1.265 0.01,-1.791c0.642,-0.773 1.96,-0.955 2.89,-1.103c0.695,-0.11 1.405,-0.175 2.108,-0.19c0.042,0 0.065,-0.022 0.094,-0.041c5.185,0.062 10.786,0.074 11.402,-0.158c1.173,-0.443 -19.553,-1.723 -20.44,0c0,0 2.676,0.062 6.092,0.117c-0.955,0.184 -2.049,0.491 -2.6,1.32c-0.421,0.635 -0.325,1.447 0.099,2.049c0.327,0.463 0.794,0.791 1.315,1.033c-0.442,-0.01 -0.884,-0.014 -1.325,-0.033c-1.544,-0.07 -3.068,-0.3 -4.608,-0.412c-2.466,-0.179 -5.006,-0.088 -7.295,-1.172c-0.904,-0.428 -1.795,-1.033 -2.354,-1.878c-0.345,-0.52 -0.483,-1.108 -0.522,-1.71c0.027,-0.053 0.045,-0.113 0.042,-0.189c-0.044,-1.219 0.771,-2.021 1.837,-2.471c0.419,-0.178 0.861,-0.3 1.305,-0.392c0.233,-0.048 0.375,-0.071 0.519,-0.084c2.585,0.001 5.168,0.004 7.753,0.005c1.178,0 2.768,0.102 3.361,-1.156c0.495,-1.051 0.542,-2.365 0.631,-3.511c0.123,-1.581 0.182,-3.169 0.179,-4.755c-0.004,-2.29 -0.015,-4.867 -0.911,-7.015c-0.148,-0.356 -0.64,-0.404 -0.771,0c-1.028,3.149 -2.196,6.277 -3.947,9.105c-1.711,2.766 -4.042,5.053 -6.932,6.562c-0.004,0.002 -0.007,0.004 -0.011,0.006c-0.009,0.005 -0.017,0.01 -0.026,0.015c-0.028,0.015 -0.043,0.035 -0.065,0.054c-1.453,0.287 -2.934,1.043 -3.491,2.355c-0.938,0.066 -2.04,0.105 -2.843,-0.439c-0.161,-0.107 -0.285,-0.283 -0.345,-0.466c-0.067,-0.2 0.776,-0.704 0.942,-0.804c0.442,-0.266 0.886,-0.396 1.381,-0.529c0.801,-0.214 1.601,-0.433 2.396,-0.669c1.32,-0.392 2.076,-1.751 2.918,-2.752c1.831,-2.176 3.852,-4.386 4.983,-7.032c1.084,-2.537 1.303,-5.417 1.7,-8.121c0.162,-1.099 0.404,-2.173 1.001,-3.124c0.575,-0.916 1.482,-1.624 2.502,-1.973c0.502,-0.172 0.56,-0.075 0.994,0.212c0.523,0.347 1.073,0.652 1.641,0.92c0.91,0.429 1.872,0.714 2.875,0.811c1.374,0.132 2.74,-0.255 3.899,-0.986c0.423,-0.267 0.814,-0.583 1.195,-0.906c0.136,-0.115 0.271,-0.232 0.41,-0.344c-0.035,0.027 0.092,-0.065 0.121,-0.084c0.024,-0.017 0.035,-0.024 0.041,-0.03c0.004,0.001 0.006,0.002 0.021,-0.002c0.998,-0.164 2.218,0.565 2.923,1.203c0.679,0.612 1.255,1.299 1.671,2.114c0.748,1.466 0.721,3.113 1.032,4.69c0.341,1.721 0.802,3.428 1.422,5.07c0.347,0.913 0.749,1.812 1.271,2.638c0.607,0.969 1.481,1.738 2.207,2.617c0.699,0.846 1.351,1.727 2.03,2.586c0.427,0.537 0.853,1.127 1.382,1.57c0.439,0.367 0.982,0.564 1.515,0.761c0.534,0.198 1.049,0.419 1.573,0.644c1.271,0.543 2.612,1.144 3.568,2.173c0.104,0.11 0.523,0.567 0.469,0.729c-0.119,0.343 -0.4,0.595 -0.74,0.711zm-17.926,-16.373c1.322,5.668 5.119,10.574 9.832,13.971c-2.352,-0.215 -4.705,-0.398 -7.047,-0.725c-0.512,-0.07 -1.107,-0.072 -1.554,-0.353c-0.437,-0.274 -0.757,-0.759 -0.978,-1.212c-0.151,-0.309 -0.131,-0.682 -0.151,-1.016c-0.027,-0.412 -0.05,-0.824 -0.072,-1.235c-0.165,-3.113 -0.278,-6.3 -0.03,-9.43zm-13.372,-1.533c0.359,1.391 0.428,2.879 0.476,4.289c0.061,1.793 0.008,3.59 -0.105,5.379c-0.072,1.138 -0.161,2.296 -0.436,3.402c-0.108,0.437 -0.28,0.848 -0.728,1.012c-0.68,0.246 -1.495,0.179 -2.204,0.179c-2.206,-0.001 -4.413,-0.003 -6.62,-0.004c2.4,-1.521 4.366,-3.591 5.902,-6.005c1.622,-2.551 2.745,-5.391 3.715,-8.252z"/>
<path class="logoAni" fill="#fff" d="m26.606,14.687c2.558,-1.003 4.219,-3.521 4.252,-6.248c0,-0.003 0.002,-0.006 0.002,-0.01c-0.024,-2.223 -1.095,-4.24 -2.897,-5.533c-1.81,-1.299 -4.261,-1.533 -6.316,-0.727c-2.023,0.794 -3.533,2.566 -4.063,4.663c-0.546,2.165 0.094,4.466 1.558,6.122c1.836,2.077 4.904,2.737 7.464,1.733zm-8.184,-7.899c0.604,-2.197 2.506,-3.803 4.716,-4.212c3.596,-0.666 6.884,2.286 6.922,5.853c-0.025,2.308 -1.334,4.352 -3.401,5.369c-2.078,1.023 -4.652,0.617 -6.396,-0.864c-1.768,-1.5 -2.45,-3.93 -1.841,-6.146z"/>
</g>
</g>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
<g/>
</symbol>
</defs>
<g>
<title>Layer 1</title>
<use x="549.04768" y="493.37139" transform="matrix(0.516705922174416,0,0,0.4822158540875421,-136.7349084633355,-116.16454447570459) " xlink:href="#svg_2" id="svg_3"/>
<g id="svg_4"/>
</g>
</svg>
CSS:
.logo {
position: absolute;
top: 39vh;
left: 57vw;
}
.logoAni {
stroke-dasharray: 2193;
stroke-dashoffset: 0;
animation: dash 3s 1;
-webkit-animation: dash 3s 1;
-o-animation: dash 3s 1;
-moz-animation: dash 3s 1;
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 2193;
}
}
最佳答案
是的，它确实看起来像，因为它嵌套在一个符号中，logoAni 没有被应用。我将其剥离并清理了 SVG 并调整了样式，以便您可以看到动画。我认为缺少的另一件大事是您需要设置一个 stroke 属性，所以我继续直接在 SVG 中设置它。
编辑:好的，所以看看您的评论，我想具体说明您如何从我的原作中得到您想要的东西。
1) 在大小方面，这是基于 viewbox for SVGs 。最好阅读一下。我猜他们在示例中所做的是将 viewBox 应用于符号然后使用它，但我只是将它添加到 SVG。现在虽然我做到了，所以你可以在 CSS 的 .logo 类中编辑宽度和高度。
2) 你说你想让它什么都没有，然后用白色填充。所以有两件事是初始白度是因为 fill 设置为 #fff。我继续将它添加为一个 CSS 属性，这样你就可以玩了。如果你将它设置为透明，你会得到一些你想要的东西，但路径显然没有包含人腿的内部，所以它不能完全得到你想要的东西。您可能需要自己定义路径。
3) 我继续并恢复了一些东西，因此它使用您的示例使用的值，但也添加了一些更改。特别是对于动画，您需要使用 forwards 以便它知道留在原地并使动画保持在最终状态。
希望对您有所帮助!
body {
background: green;
}
.logo {
width: 200px;
height: 200px;
}
.logoAni {
fill: white;
stroke-dasharray: 2193;
stroke-dashoffset: 2193;
animation: dash 5s ease-in forwards;
}
@keyframes dash {
from {
stroke-dashoffset: 2193;
}
to {
stroke-dashoffset: 0;
}
}<svg class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51.674 51.674">
<g>
<g class="container">
<path class="logoAni" stroke="#fff" d="m51.378,42.158c-0.974,-1.539 -2.923,-2.291 -4.521,-2.977c-0.736,-0.314 -1.525,-0.547 -2.233,-0.921c-0.795,-0.42 -1.371,-1.366 -1.908,-2.048c-0.94,-1.194 -1.84,-2.42 -2.884,-3.529c-0.667,-0.71 -1.18,-1.443 -1.612,-2.32c-0.748,-1.519 -1.233,-3.172 -1.642,-4.811c-0.147,-0.596 -0.28,-1.196 -0.397,-1.799c-0.031,-0.164 -0.062,-0.329 -0.09,-0.495c-0.002,-0.021 -0.004,-0.031 -0.006,-0.041c-0.031,-0.272 -0.049,-0.547 -0.08,-0.819c-0.203,-1.749 -0.703,-3.386 -1.85,-4.749c-1.055,-1.254 -2.809,-2.561 -4.548,-2.274c-0.067,0.011 -0.12,0.036 -0.163,0.067c-0.264,0.122 -0.492,0.349 -0.702,0.527c-0.417,0.355 -0.843,0.69 -1.313,0.973c-1.519,0.913 -3.25,0.946 -4.907,0.398c-0.606,-0.2 -1.179,-0.484 -1.735,-0.795c-0.317,-0.177 -0.622,-0.373 -0.925,-0.573c-0.217,-0.144 -0.394,-0.304 -0.663,-0.32c-0.918,-0.054 -1.909,0.589 -2.591,1.13c-2.092,1.66 -2.214,4.428 -2.585,6.855c-0.218,1.425 -0.428,2.853 -0.801,4.247c-0.375,1.404 -1.021,2.652 -1.816,3.861c-0.82,1.248 -1.776,2.401 -2.735,3.545c-0.456,0.543 -0.916,1.084 -1.37,1.63c-0.467,0.562 -0.888,1.25 -1.501,1.661c-0.3,0.201 -0.703,0.267 -1.046,0.365c-0.368,0.105 -0.737,0.209 -1.106,0.31c-0.606,0.166 -1.229,0.289 -1.806,0.544c-0.624,0.275 -1.839,0.922 -1.842,1.736c-0.002,0.594 0.518,1.084 1.004,1.338c0.809,0.423 1.794,0.449 2.706,0.402c-0.045,0.933 0.096,1.848 0.572,2.674c0.537,0.932 1.464,1.592 2.387,2.102c2.497,1.381 5.427,1.255 8.183,1.456c1.549,0.112 3.08,0.338 4.634,0.407c1.62,0.072 3.243,0.062 4.862,0.045c3.272,-0.036 6.542,-0.02 9.812,-0.018c1.774,0 3.554,-0.002 5.328,-0.005c0.921,0 1.842,0 2.765,0c0.768,0.003 1.534,0.038 2.293,-0.118c1.191,-0.25 2.166,-1.065 2.791,-2.086c0.479,-0.789 0.605,-1.646 0.672,-2.521c0.168,-0.006 0.314,-0.092 0.344,-0.288c0.029,-0.209 0.033,-0.404 0.023,-0.591c0.715,0.214 1.487,0.303 2.18,0.016c0.416,-0.173 0.728,-0.477 0.953,-0.865c0.293,-0.505 0.164,-0.859 -0.131,-1.326zm-15.293,-18.941c-0.004,-0.022 -0.003,-0.016 0,0l0,0zm14.055,20.438c-0.642,0.219 -1.387,-0.004 -2.021,-0.25c-0.749,-1.441 -2.967,-1.97 -4.607,-2.102c-0.01,-0.008 -0.019,-0.021 -0.028,-0.027c-5.75,-3.775 -10.404,-9.9 -10.927,-16.93c-0.017,-0.203 -0.152,-0.323 -0.309,-0.365c-0.167,-0.06 -0.351,-0.023 -0.436,0.144c-0.021,0.033 -0.035,0.071 -0.045,0.114c0,0 0,0 0,0.001c-0.711,4.433 -0.541,9.032 -0.266,13.499c0.021,0.346 0,0.737 0.078,1.076c0.115,0.493 0.375,0.947 0.695,1.336c0.309,0.375 0.695,0.76 1.166,0.92c0.63,0.213 1.367,0.235 2.025,0.322c1.535,0.203 3.08,0.344 4.623,0.482c0.713,0.062 1.428,0.127 2.142,0.191c0.077,0 0.423,0 0.423,0s-0.346,0 -0.423,0c0.059,0.004 0.116,0.01 0.175,0.016c0.238,0.021 0.604,0.119 0.859,0.052c1.106,0.146 3.392,0.58 4.039,1.724c-0.119,1.249 -0.047,2.467 -0.731,3.588c-0.616,1.008 -1.675,1.602 -2.841,1.689c-0.75,0.057 -1.52,0.007 -2.271,0.007c-0.854,0 -1.711,0 -2.564,0.001c-1.645,0.001 -3.289,0.003 -4.934,0.002c-3.271,-0.002 -6.539,-0.016 -9.809,0.02c-0.745,0.01 -1.49,0.012 -2.234,0.007c-0.874,-0.212 -1.741,-0.565 -2.273,-1.265c-0.411,-0.539 -0.428,-1.265 0.01,-1.791c0.642,-0.773 1.96,-0.955 2.89,-1.103c0.695,-0.11 1.405,-0.175 2.108,-0.19c0.042,0 0.065,-0.022 0.094,-0.041c5.185,0.062 10.786,0.074 11.402,-0.158c1.173,-0.443 -19.553,-1.723 -20.44,0c0,0 2.676,0.062 6.092,0.117c-0.955,0.184 -2.049,0.491 -2.6,1.32c-0.421,0.635 -0.325,1.447 0.099,2.049c0.327,0.463 0.794,0.791 1.315,1.033c-0.442,-0.01 -0.884,-0.014 -1.325,-0.033c-1.544,-0.07 -3.068,-0.3 -4.608,-0.412c-2.466,-0.179 -5.006,-0.088 -7.295,-1.172c-0.904,-0.428 -1.795,-1.033 -2.354,-1.878c-0.345,-0.52 -0.483,-1.108 -0.522,-1.71c0.027,-0.053 0.045,-0.113 0.042,-0.189c-0.044,-1.219 0.771,-2.021 1.837,-2.471c0.419,-0.178 0.861,-0.3 1.305,-0.392c0.233,-0.048 0.375,-0.071 0.519,-0.084c2.585,0.001 5.168,0.004 7.753,0.005c1.178,0 2.768,0.102 3.361,-1.156c0.495,-1.051 0.542,-2.365 0.631,-3.511c0.123,-1.581 0.182,-3.169 0.179,-4.755c-0.004,-2.29 -0.015,-4.867 -0.911,-7.015c-0.148,-0.356 -0.64,-0.404 -0.771,0c-1.028,3.149 -2.196,6.277 -3.947,9.105c-1.711,2.766 -4.042,5.053 -6.932,6.562c-0.004,0.002 -0.007,0.004 -0.011,0.006c-0.009,0.005 -0.017,0.01 -0.026,0.015c-0.028,0.015 -0.043,0.035 -0.065,0.054c-1.453,0.287 -2.934,1.043 -3.491,2.355c-0.938,0.066 -2.04,0.105 -2.843,-0.439c-0.161,-0.107 -0.285,-0.283 -0.345,-0.466c-0.067,-0.2 0.776,-0.704 0.942,-0.804c0.442,-0.266 0.886,-0.396 1.381,-0.529c0.801,-0.214 1.601,-0.433 2.396,-0.669c1.32,-0.392 2.076,-1.751 2.918,-2.752c1.831,-2.176 3.852,-4.386 4.983,-7.032c1.084,-2.537 1.303,-5.417 1.7,-8.121c0.162,-1.099 0.404,-2.173 1.001,-3.124c0.575,-0.916 1.482,-1.624 2.502,-1.973c0.502,-0.172 0.56,-0.075 0.994,0.212c0.523,0.347 1.073,0.652 1.641,0.92c0.91,0.429 1.872,0.714 2.875,0.811c1.374,0.132 2.74,-0.255 3.899,-0.986c0.423,-0.267 0.814,-0.583 1.195,-0.906c0.136,-0.115 0.271,-0.232 0.41,-0.344c-0.035,0.027 0.092,-0.065 0.121,-0.084c0.024,-0.017 0.035,-0.024 0.041,-0.03c0.004,0.001 0.006,0.002 0.021,-0.002c0.998,-0.164 2.218,0.565 2.923,1.203c0.679,0.612 1.255,1.299 1.671,2.114c0.748,1.466 0.721,3.113 1.032,4.69c0.341,1.721 0.802,3.428 1.422,5.07c0.347,0.913 0.749,1.812 1.271,2.638c0.607,0.969 1.481,1.738 2.207,2.617c0.699,0.846 1.351,1.727 2.03,2.586c0.427,0.537 0.853,1.127 1.382,1.57c0.439,0.367 0.982,0.564 1.515,0.761c0.534,0.198 1.049,0.419 1.573,0.644c1.271,0.543 2.612,1.144 3.568,2.173c0.104,0.11 0.523,0.567 0.469,0.729c-0.119,0.343 -0.4,0.595 -0.74,0.711zm-17.926,-16.373c1.322,5.668 5.119,10.574 9.832,13.971c-2.352,-0.215 -4.705,-0.398 -7.047,-0.725c-0.512,-0.07 -1.107,-0.072 -1.554,-0.353c-0.437,-0.274 -0.757,-0.759 -0.978,-1.212c-0.151,-0.309 -0.131,-0.682 -0.151,-1.016c-0.027,-0.412 -0.05,-0.824 -0.072,-1.235c-0.165,-3.113 -0.278,-6.3 -0.03,-9.43zm-13.372,-1.533c0.359,1.391 0.428,2.879 0.476,4.289c0.061,1.793 0.008,3.59 -0.105,5.379c-0.072,1.138 -0.161,2.296 -0.436,3.402c-0.108,0.437 -0.28,0.848 -0.728,1.012c-0.68,0.246 -1.495,0.179 -2.204,0.179c-2.206,-0.001 -4.413,-0.003 -6.62,-0.004c2.4,-1.521 4.366,-3.591 5.902,-6.005c1.622,-2.551 2.745,-5.391 3.715,-8.252z"/>
<path class="logoAni" stroke="#fff" d="m26.606,14.687c2.558,-1.003 4.219,-3.521 4.252,-6.248c0,-0.003 0.002,-0.006 0.002,-0.01c-0.024,-2.223 -1.095,-4.24 -2.897,-5.533c-1.81,-1.299 -4.261,-1.533 -6.316,-0.727c-2.023,0.794 -3.533,2.566 -4.063,4.663c-0.546,2.165 0.094,4.466 1.558,6.122c1.836,2.077 4.904,2.737 7.464,1.733zm-8.184,-7.899c0.604,-2.197 2.506,-3.803 4.716,-4.212c3.596,-0.666 6.884,2.286 6.922,5.853c-0.025,2.308 -1.334,4.352 -3.401,5.369c-2.078,1.023 -4.652,0.617 -6.396,-0.864c-1.768,-1.5 -2.45,-3.93 -1.841,-6.146z"/>
</g>
</g>
</svg>关于html - CSS SVG 动画不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46309711/