[css]svg動態範例

html部分:
<div id="svg_test">
<svg version="1.1" id="svg_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="967px" height="1000px" viewBox="0 0 96.718 100.027" enable-background="new 0 0 96.718 100.027" xml:space="preserve">
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M6.218,48.542c0-14.534,7.407-27.361,18.645-34.927v-0.918C13.176,20.367,5.434,33.558,5.434,48.542
c0,22.129,16.876,40.399,38.443,42.642v-0.792C22.743,88.149,6.218,70.242,6.218,48.542z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M33.83,8.239v0.835c4.54-1.671,9.416-2.628,14.527-2.628c5.115,0,9.991,0.957,14.532,2.628V8.239
c-4.548-1.64-9.425-2.58-14.532-2.58C43.251,5.659,38.376,6.599,33.83,8.239z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M90.495,48.542c0,21.695-16.518,39.607-37.652,41.85v0.792c21.569-2.247,38.441-20.513,38.441-42.642
c0-14.984-7.744-28.175-19.429-35.845v0.918C83.09,21.181,90.495,34.008,90.495,48.542z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M48.357,0.232c-5.06,0-9.938,0.788-14.527,2.232v1.397v0.232v1.391c4.57-1.548,9.443-2.417,14.527-2.417
c5.087,0,9.959,0.875,14.532,2.417V4.094V3.862V2.465C58.299,1.02,53.417,0.232,48.357,0.232z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M2.834,48.542c0-16.481,8.852-30.902,22.028-38.875V8.136V7.881V6.354C10.05,14.62,0,30.418,0,48.542
C0,73.67,19.308,94.356,43.877,96.629v-1.312v-0.222v-1.304C20.874,91.531,2.834,72.105,2.834,48.542z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M71.855,6.354v1.527V8.14v1.527c13.179,7.973,22.027,22.394,22.027,38.875c0,23.563-18.037,42.989-41.04,45.244v1.31
v0.222v1.304c24.57-2.271,43.876-22.958,43.876-48.079C96.718,30.418,86.669,14.62,71.855,6.354z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M48.357,82.788c-1.652,0-2.996,1.071-2.996,2.384v5.313v0.785v2.59v1.31v0.227v1.303v0.95
c0,1.314,1.343,2.379,2.996,2.379c1.657,0,3.003-1.064,3.003-2.379v-0.95v-1.303v-0.227v-1.31v-2.59v-0.785v-5.313
C51.36,83.859,50.014,82.788,48.357,82.788z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M29.35,0c-1.657,0-3.005,1.064-3.005,2.373v3.205v1.456v0.238v1.494v3.032v0.917v2.14c0,1.313,1.349,2.379,3.005,2.379
c1.654,0,2.999-1.066,2.999-2.379V9.617V8.781V6.029V4.638V4.404V3.009V2.373C32.349,1.064,31.004,0,29.35,0z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M67.369,17.233c1.656,0,3.004-1.066,3.004-2.379v-2.14v-0.917V8.765V7.271V7.033V5.577V2.373
C70.373,1.064,69.025,0,67.369,0c-1.655,0-2.999,1.064-2.999,2.373v0.637v1.395v0.234v1.391v2.751v0.836v5.237
C64.37,16.167,65.713,17.233,67.369,17.233z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M31.079,45.283c4.079-1.162,7.878-3.426,10.91-6.469c2.961-2.959,5.179-6.657,6.368-10.618
c1.196,3.96,3.411,7.658,6.374,10.618c3.027,3.043,6.837,5.307,10.904,6.469c4.065,1.152,8.412,1.261,12.3-0.103
c-3.868-1.364-7.261-2.765-10.354-4.591c-3.082-1.787-5.836-3.91-8.279-6.341c-2.442-2.439-4.564-5.193-6.36-8.272
c-1.824-3.08-3.229-6.486-4.584-10.341c-1.355,3.855-2.762,7.261-4.583,10.341c-1.793,3.079-3.917,5.833-6.361,8.272
c-2.447,2.432-5.198,4.555-8.281,6.341c-3.088,1.826-6.486,3.227-10.351,4.591C22.668,46.544,27.014,46.435,31.079,45.283z"/>
<path stroke="#000000" stroke-width="0.3" stroke-miterlimit="10" class="path" d="M59.301,59.688c-2.442-2.439-4.564-5.192-6.36-8.271c-1.824-3.082-3.229-6.487-4.584-10.342
c-1.355,3.855-2.762,7.261-4.583,10.342c-1.793,3.079-3.917,5.832-6.361,8.271c-2.447,2.433-5.198,4.55-8.281,6.341
c-3.088,1.82-6.486,3.227-10.351,4.59c3.887,1.368,8.232,1.259,12.297,0.113c4.079-1.169,7.878-3.433,10.91-6.477
c2.961-2.96,5.179-6.658,6.368-10.617c1.196,3.959,3.411,7.657,6.374,10.617c3.027,3.044,6.837,5.308,10.904,6.477
c4.065,1.146,8.412,1.255,12.3-0.113c-3.868-1.363-7.261-2.77-10.354-4.59C64.499,64.237,61.745,62.12,59.301,59.688z"/>

</svg>
</div>

css部分:
<style>
#svg_test{
text-align: center;
}
#svg_1{
fill: #000000;
width: 500px;
height: 500px;
stroke: #000000;
}
#svg_test2{
text-align: center;
}
#svg_2{
margin: 0 auto;
}
.path {
  fill-opacity: 0;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-name: DrawLine, FillIn;
  animation-duration: 10s, 10s;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes DrawLine {
  to { stroke-dashOffset: 0; }
}

@keyframes FadeStroke {
  to { stroke-opacity: 0; }
}

@keyframes FillIn {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}
@keyframes fill{
0% {
fill: black;
}
50% {
fill: white;
}
100% {
fill: black;
}
}
</style>