【发布时间】：2019-02-25 14:33:30
【问题描述】：
如何将动画 svg 代码保存到 .svg 文件？ 我尝试将它放在一个文件中并使用 .svg 保存它，但这完全消除了动画代码，使 svg 保持静态。
关于如何执行此操作或将代码转换为 gif 的任何想法？
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="transform-origin: 50px 50px 0px;" xml:space="preserve"><g style="transform-origin: 50px 50px 0px;"><g style="transform-origin: 50px 50px 0px; transform: scale(0.44);"><g style="transform-origin: 50px 50px 0px; animation-duration: 1.3s; animation-delay: -1.3s; animation-direction: normal;" class=""><g><style type="text/css" class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -2s; animation-direction: normal;">.st0{fill:#F4E6C8;} .st1{opacity:0.8;fill:#849B87;} .st2{fill:#D65A62;} .st3{fill:#E15C64;} .st4{fill:#F47E5F;} .st5{fill:#F7B26A;} .st6{fill:#FEE8A2;} .st7{fill:#ACBD81;} .st8{fill:#F5E169;} .st9{fill:#F0AF6B;} .st10{fill:#EA7C60;} .st11{fill:#A8B980;} .st12{fill:#829985;} .st13{fill:#798AAE;} .st14{fill:#8672A7;} .st15{fill:#CC5960;} .st16{fill:#E17A5F;} .st17{fill:#849B87;} .st18{opacity:0.8;fill:#E15C64;} .st19{opacity:0.8;fill:#F7B26A;} .st20{fill:#79A5B5;} .st21{opacity:0.8;fill:#79A5B4;} .st22{fill:#666766;}</style><g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.85714s; animation-direction: normal;"><rect x="12.5" y="25" class="st2" width="15" height="50" fill="#8bb4d7" style="fill: rgb(139, 180, 215);"></rect></g><g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.71429s; animation-direction: normal;"><rect x="32.5" y="25" class="st10" width="15" height="50" fill="#000000" style="fill: rgb(0, 0, 0);"></rect></g><g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.57143s; animation-direction: normal;"><rect x="52.5" y="25" class="st9" width="15" height="50" fill="#939598" style="fill: rgb(147, 149, 152);"></rect></g><g class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.42857s; animation-direction: normal;"><rect x="72.5" y="25" class="st11" width="15" height="50" fill="#dcddde" style="fill: rgb(220, 221, 222);"></rect></g><metadata xmlns:d="https://loading.io/stock/" class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.28571s; animation-direction: normal;">
<d:name class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1.14286s; animation-direction: normal;">bar</d:name>
<d:tags class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -1s; animation-direction: normal;">facebook,block,rectangle,progress,waiting,bar,spinner</d:tags>
<d:license class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -0.857143s; animation-direction: normal;">cc-by</d:license>
<d:slug class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -0.714286s; animation-direction: normal;">f15w9p</d:slug>
</metadata></g></g></g></g><style type="text/css" class="ld ld-breath" style="transform-origin: 50px 50px 0px; animation-duration: 2s; animation-delay: -0.571429s; animation-direction: normal;">path,ellipse,circle,rect,polygon,polyline,line { stroke-width: 0; }@keyframes ld-breath {
0% {
-webkit-transform: scale(0.86);
transform: scale(0.86);
}
50% {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
100% {
-webkit-transform: scale(0.86);
transform: scale(0.86);
}
}
@-webkit-keyframes ld-breath {
0% {
-webkit-transform: scale(0.86);
transform: scale(0.86);
}
50% {
-webkit-transform: scale(1.06);
transform: scale(1.06);
}
100% {
-webkit-transform: scale(0.86);
transform: scale(0.86);
}
}
.ld.ld-breath {
-webkit-animation: ld-breath 1s infinite;
animation: ld-breath 1s infinite;
}
【问题讨论】：
标签： html svg gif svg-animate