如何动画SVG来绘制线而不是轮廓？
如何动画SVG来绘制线而不是轮廓？
提问于 2020-01-16 13:32:45
我试图动画一个SVG文件，使之看起来尽可能像下面的gif，我想我已经非常接近了，但是我被困在一个问题上，我不知道为什么要绘制轮廓，然后整个东西都被填满了。我希望整行都是动画，如gif中所示。
有人知道我可以在我的CSS中改变什么吗?或者，如果我在SVG中有一些东西需要修改以使这成为可能，我对动画SVG非常陌生。
当前动画
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1244.41 201.57">
<defs>
<style>
.cls-1 {
fill:#f59e00;
}
.cls-2 {
fill:#7a1331;
}
#Dots circle {
fill:#1e9a64;
}
#Lines path {
animation: draw 3s linear forwards;
animation-delay: 1.2s;
}
#Years_Text {
animation: 1s ease-out 0s 1 slideInFromRight;
}
.line-1 {
stroke-dasharray: 2150;
stroke-dashoffset: 2150;
}
.line-2 {
stroke-dasharray: 1600;
stroke-dashoffset: 1600;
}
.line-3 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.line-4 {
stroke-dasharray: 650;
stroke-dashoffset: 650;
}
.line-5 {
stroke-dasharray: 1600;
stroke-dashoffset: 1600;
}
.line-6 {
stroke-dasharray: 1300;
stroke-dashoffset: 1300;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
fill: #1e9a64;
}
}
.dot-1 {
animation: 1s ease-out 0s 1 slideInFromLeft;
}
.dot-2 {
animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
}
.dot-3 {
animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
}
.dot-4 {
animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
}
.dot-5 {
animation: 1s ease-out 0s 1 slideInFromLeft;
}
.dot-6 {
animation: 1s ease-out 0s 1 slideInFromLeft;
}
.dot-7 {
animation: 1s ease-out 0s 1 slideInFromCenterToRight;
}
.dot-8 {
animation: 1s ease-out 0s 1 slideInFromCenterToRight;
}
.dot-9 {
animation: 1s ease-out 0s 1 slideInFromTop;
}
.dot-10 {
animation: 1s ease-out 0s 1 slideInFromLeft;
}
.dot-11 {
animation: 1s ease-out 0s 1 slideInFromRight;
}
.dot-12 {
animation: 1s ease-out 0s 1 slideInFromRight;
}
@keyframes slideInFromLeft {
0% {
transform: translate(-20%, -20%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes slideInFromRight {
0% {
transform: translate(+20%, +20%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes slideInFromCenterToRight {
0% {
transform: translate(-5%, +50%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes slideInFromCenterToLeft {
0% {
transform: translate(+15%, +30%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes slideInFromTop {
0% {
transform: translate(-5%, -5%);
}
100% {
transform: translate(0, 0);
}
}
</style>
</defs>
<g id="Lines">
<path class="line-1" fill="none" stroke="#1e9a64" stroke-width="2" d="M1155.49,188.09h-69.85A3.74,3.74,0,0,1,1083,187l-20.2-20.19a3.73,3.73,0,0,1-1.09-2.64v-137a3.73,3.73,0,0,1,1.09-2.64L1083,4.35a3.74,3.74,0,0,1,2.64-1.1h24.21a3.74,3.74,0,0,1,0,7.47h-22.67l-18,18V162.61l18,18h66.76l18-18V28.73l-18-18h-23.45a3.74,3.74,0,1,1,0-7.47h25a3.74,3.74,0,0,1,2.64,1.1l20.2,20.19a3.73,3.73,0,0,1,1.09,2.64v137a3.73,3.73,0,0,1-1.09,2.64L1158.13,187A3.74,3.74,0,0,1,1155.49,188.09Z" />
<path class="line-2" fill="none" stroke="#1e9a64" stroke-width="2" d="M1145.2,169.43h-14.71a3.74,3.74,0,1,1,0-7.47h13.11l9.7-10.21V39.25l-9.67-9.87H1098.2l-10.37,9.93V151.68l10.4,10.28h11.62a3.74,3.74,0,0,1,0,7.47H1096.7a3.73,3.73,0,0,1-2.62-1.08l-12.6-12.46a3.71,3.71,0,0,1-1.11-2.65V37.72a3.69,3.69,0,0,1,1.15-2.69L1094.12,23a3.71,3.71,0,0,1,2.58-1h48.5a3.79,3.79,0,0,1,2.67,1.12l11.82,12.08a3.72,3.72,0,0,1,1.07,2.61V153.24a3.72,3.72,0,0,1-1,2.57l-11.82,12.45A3.73,3.73,0,0,1,1145.2,169.43Z" />
<path class="line-3" fill="none" stroke="#1e9a64" stroke-width="2" d="M1131.61,150.77h-23.15a3.76,3.76,0,0,1-2.6-1.05l-5.69-5.51a3.71,3.71,0,0,1-1.14-2.68V106a3.73,3.73,0,1,1,7.46,0v34l3.48,3.36h20.31l4.36-3.55V52.26L1130.13,48h-20l-3.63,4V85.35a3.73,3.73,0,0,1-7.46,0V50.64a3.73,3.73,0,0,1,1-2.49l5.7-6.34a3.74,3.74,0,0,1,2.78-1.24h23.15a3.73,3.73,0,0,1,2.55,1l6.76,6.34a3.75,3.75,0,0,1,1.18,2.72v90.89a3.74,3.74,0,0,1-1.38,2.89l-6.76,5.51A3.73,3.73,0,0,1,1131.61,150.77Z" />
<path class="line-4" fill="none" stroke="#1e9a64" stroke-width="2" d="M974.43,150.77H938a3.74,3.74,0,0,1,0-7.47H970.7v-84l-11.33,5.72A3.73,3.73,0,0,1,956,58.41L972.75,50a3.72,3.72,0,0,1,5.41,3.33V147A3.73,3.73,0,0,1,974.43,150.77Z" />
<path class="line-5" fill="none" stroke="#1e9a64" stroke-width="2" d="M1048.22,188.09H938a3.73,3.73,0,0,1-3.73-3.74V165.69A3.73,3.73,0,0,1,938,162h51.39V29.38h-6.5L949.75,46.73a3.73,3.73,0,1,1-3.46-6.61l33.92-17.78a3.72,3.72,0,0,1,1.73-.43h11.15a3.73,3.73,0,0,1,3.73,3.73V165.69a3.73,3.73,0,0,1-3.73,3.74H941.7v11.19h106.52a3.74,3.74,0,0,1,0,7.47Z" />
<path class="line-6" fill="none" stroke="#1e9a64" stroke-width="2" d="M1048.22,169.43h-36.47a3.74,3.74,0,0,1,0-7.47h32.73V150.77h-32.73A3.73,3.73,0,0,1,1008,147V10.72H975.33L940.84,28.36a3.73,3.73,0,1,1-3.4-6.64L972.73,3.66a3.74,3.74,0,0,1,1.7-.41h37.32A3.73,3.73,0,0,1,1015.48,7V143.3h32.74A3.73,3.73,0,0,1,1052,147v18.66A3.73,3.73,0,0,1,1048.22,169.43Z" />
</g>
<g id="Dots">
<circle class="dot-1" cx="941.03" cy="147.03" r="6.98" />
<circle class="dot-2" cx="941.23" cy="23.59" r="6.98" />
<circle class="dot-3" cx="958.83" cy="61.32" r="6.98" />
<circle class="dot-4" cx="949.22" cy="42.96" r="6.98" />
<circle class="dot-5" cx="1014.77" cy="165.69" r="6.98" />
<circle class="dot-6" cx="1045.08" cy="184.35" r="6.98" />
<circle class="dot-7" cx="1109.85" cy="6.98" r="6.98" />
<circle class="dot-8" cx="1130.49" cy="6.98" r="6.98" />
<circle class="dot-9" cx="1109.85" cy="165.69" r="6.98" />
<circle class="dot-10" cx="1130.49" cy="165.69" r="6.98" />
<circle class="dot-11" cx="1102.87" cy="105.99" r="6.98" />
<circle class="dot-12" cx="1102.87" cy="85.35" r="6.98" />
</g>
</svg>
想要动画
回答 1
Stack Overflow用户
发布于 2020-01-16 14:51:05
基本问题是：
@keyframes draw {
to {
stroke-dashoffset: 0;
fill: #1e9a64; <=== this
}
}您不能fill，因为path只在路径完成后绘制。
我建议调整路径，使路径“边*之间的空间大约是行程宽度的一半。
或者，调整笔画宽度(比如stroke-width="7.5")，使圆圈变大一点(比如r="9.98).
就像这样(很差的近似)：
svg {
margin: 5vh
}<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1244.41 201.57">
<defs>
<style>
.cls-1 {
fill:#f59e00;
}
.cls-2 {
fill:#7a1331;
}
#Dots circle {
fill:#1e9a64;
}
#Lines path {
animation: draw 3s linear forwards;
animation-delay: 1.2s;
}
#Years_Text {
animation: 1s ease-out 0s 1 slideInFromRight;
}
.line-1 {
stroke-dasharray: 2150;
stroke-dashoffset: 2150;
}
.line-2 {
stroke-dasharray: 1600;
stroke-dashoffset: 1600;
}
.line-3 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.line-4 {
stroke-dasharray: 650;
stroke-dashoffset: 650;
}
.line-5 {
stroke-dasharray: 1600;
stroke-dashoffset: 1600;
}
.line-6 {
stroke-dasharray: 1300;
stroke-dashoffset: 1300;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
.dot-1 {
animation: 1s ease-out 0s 1 slideInFromLeft;
}
.dot-2 {
animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
}
.dot-3 {
animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
}
.dot-4 {
animation: 1s ease-out 0s 1 slideInFromCenterToLeft;
}
.dot-5 {
animation: 1s ease-out 0s 1 slideInFromLeft;
}
.dot-6 {
animation: 1s ease-out 0s 1 slideInFromLeft;
}
.dot-7 {
animation: 1s ease-out 0s 1 slideInFromCenterToRight;
}
.dot-8 {
animation: 1s ease-out 0s 1 slideInFromCenterToRight;
}
.dot-9 {
animation: 1s ease-out 0s 1 slideInFromTop;
}
.dot-10 {
animation: 1s ease-out 0s 1 slideInFromLeft;
}
.dot-11 {
animation: 1s ease-out 0s 1 slideInFromRight;
}
.dot-12 {
animation: 1s ease-out 0s 1 slideInFromRight;
}
@keyframes slideInFromLeft {
0% {
transform: translate(-20%, -20%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes slideInFromRight {
0% {
transform: translate(+20%, +20%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes slideInFromCenterToRight {
0% {
transform: translate(-5%, +50%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes slideInFromCenterToLeft {
0% {
transform: translate(+15%, +30%);
}
100% {
transform: translate(0, 0);
}
}
@keyframes slideInFromTop {
0% {
transform: translate(-5%, -5%);
}
100% {
transform: translate(0, 0);
}
}
</style>
</defs>
<g id="Lines">
<path class="line-1" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1155.49,188.09h-69.85A3.74,3.74,0,0,1,1083,187l-20.2-20.19a3.73,3.73,0,0,1-1.09-2.64v-137a3.73,3.73,0,0,1,1.09-2.64L1083,4.35a3.74,3.74,0,0,1,2.64-1.1h24.21a3.74,3.74,0,0,1,0,7.47h-22.67l-18,18V162.61l18,18h66.76l18-18V28.73l-18-18h-23.45a3.74,3.74,0,1,1,0-7.47h25a3.74,3.74,0,0,1,2.64,1.1l20.2,20.19a3.73,3.73,0,0,1,1.09,2.64v137a3.73,3.73,0,0,1-1.09,2.64L1158.13,187A3.74,3.74,0,0,1,1155.49,188.09Z" />
<path class="line-2" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1145.2,169.43h-14.71a3.74,3.74,0,1,1,0-7.47h13.11l9.7-10.21V39.25l-9.67-9.87H1098.2l-10.37,9.93V151.68l10.4,10.28h11.62a3.74,3.74,0,0,1,0,7.47H1096.7a3.73,3.73,0,0,1-2.62-1.08l-12.6-12.46a3.71,3.71,0,0,1-1.11-2.65V37.72a3.69,3.69,0,0,1,1.15-2.69L1094.12,23a3.71,3.71,0,0,1,2.58-1h48.5a3.79,3.79,0,0,1,2.67,1.12l11.82,12.08a3.72,3.72,0,0,1,1.07,2.61V153.24a3.72,3.72,0,0,1-1,2.57l-11.82,12.45A3.73,3.73,0,0,1,1145.2,169.43Z" />
<path class="line-3" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1131.61,150.77h-23.15a3.76,3.76,0,0,1-2.6-1.05l-5.69-5.51a3.71,3.71,0,0,1-1.14-2.68V106a3.73,3.73,0,1,1,7.46,0v34l3.48,3.36h20.31l4.36-3.55V52.26L1130.13,48h-20l-3.63,4V85.35a3.73,3.73,0,0,1-7.46,0V50.64a3.73,3.73,0,0,1,1-2.49l5.7-6.34a3.74,3.74,0,0,1,2.78-1.24h23.15a3.73,3.73,0,0,1,2.55,1l6.76,6.34a3.75,3.75,0,0,1,1.18,2.72v90.89a3.74,3.74,0,0,1-1.38,2.89l-6.76,5.51A3.73,3.73,0,0,1,1131.61,150.77Z" />
<path class="line-4" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M974.43,150.77H938a3.74,3.74,0,0,1,0-7.47H970.7v-84l-11.33,5.72A3.73,3.73,0,0,1,956,58.41L972.75,50a3.72,3.72,0,0,1,5.41,3.33V147A3.73,3.73,0,0,1,974.43,150.77Z" />
<path class="line-5" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1048.22,188.09H938a3.73,3.73,0,0,1-3.73-3.74V165.69A3.73,3.73,0,0,1,938,162h51.39V29.38h-6.5L949.75,46.73a3.73,3.73,0,1,1-3.46-6.61l33.92-17.78a3.72,3.72,0,0,1,1.73-.43h11.15a3.73,3.73,0,0,1,3.73,3.73V165.69a3.73,3.73,0,0,1-3.73,3.74H941.7v11.19h106.52a3.74,3.74,0,0,1,0,7.47Z" />
<path class="line-6" fill="none" stroke="#1e9a64" stroke-width="7.5" d="M1048.22,169.43h-36.47a3.74,3.74,0,0,1,0-7.47h32.73V150.77h-32.73A3.73,3.73,0,0,1,1008,147V10.72H975.33L940.84,28.36a3.73,3.73,0,1,1-3.4-6.64L972.73,3.66a3.74,3.74,0,0,1,1.7-.41h37.32A3.73,3.73,0,0,1,1015.48,7V143.3h32.74A3.73,3.73,0,0,1,1052,147v18.66A3.73,3.73,0,0,1,1048.22,169.43Z" />
</g>
<g id="Dots">
<circle class="dot-1" cx="941.03" cy="147.03" r="9.98" />
<circle class="dot-2" cx="941.23" cy="23.59" r="9.98" />
<circle class="dot-3" cx="958.83" cy="61.32" r="9.98" />
<circle class="dot-4" cx="949.22" cy="42.96" r="9.98" />
<circle class="dot-5" cx="1014.77" cy="165.69" r="9.98" />
<circle class="dot-6" cx="1045.08" cy="184.35" r="9.98" />
<circle class="dot-7" cx="1109.85" cy="6.98" r="9.98" />
<circle class="dot-8" cx="1130.49" cy="6.98" r="9.98" />
<circle class="dot-9" cx="1109.85" cy="165.69" r="9.98" />
<circle class="dot-10" cx="1130.49" cy="165.69" r="9.98" />
<circle class="dot-11" cx="1102.87" cy="105.99" r="9.98" />
<circle class="dot-12" cx="1102.87" cy="85.35" r="9.98" />
</g>
</svg>
顺便说一句，SVG中有一个名为pathLength的属性，它可以手动设置为pathLength="“。
来自CSS-戏法
据我所知，这本身并不能起到任何作用。它并不是只绘制部分路径-它仍然绘制整个事情就像你什么也不做一样，只是现在路径长度的“数学”是基于1的。 现在我们可以将笔画-dasharray设置为1，并在CSS中动画偏移！
E.g
@keyframes dash {
from {
stroke-dashoffset: 1;
}
to {
stroke-dashoffset: 0;
}
}您可以在CSS中使用显著减少重复的方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59770788
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号