如何将动画svg代码保存到.svg文件？

时间：2018-09-21 08:10:52

标签： html svg gif svg-animate

如何将动画的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;
}

1 个答案:

答案 0 :(得分：1)

您只是忘了关闭svg标签。最后添加</svg>。 您的文件应如下所示：

<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">
<style type="text/css">
.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;}

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;
}


</style>

<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>
<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>
</svg>

将所有样式语句更清晰地分组

相关问题
最新问题