vivus 让svg动起来的库

使用方法参考这篇blog

svg库使用iconfinder

update:

原来我理解错了,不是只有那个库的可以,而是我很幸运又不幸的下载的第一个icon可以,后来和UI一起研究可以动的原因,是因为svg文件里有路径、线等一些元素,不可以的那些是整合起来了。

举个例子:

这个可以

<?xml version="1.0" ?><svg style="enable-background:new 0 0 48 48;" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
	.st0{display:none;}
	.st1{fill:none;stroke:#303030;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st2{fill:#303030;}
</style><g class="st0" id="Padding__x26__Artboard"/><g id="Icons"><g><path class="st1" d="M35.24081,27.28716l-0.00455,6.35106c0,1.51155-1.14731,2.74078-2.54954,2.74078H15.31331    c-1.41135,0-2.55866-1.22923-2.55866-2.74078l0.00455-6.34194c0.44616,0.06369,0.91055,0.08192,1.36583,0.05463l-0.00455,6.28731    c0,0.75578,0.53725,1.37495,1.19282,1.37495h17.37341c0.65557,0,1.18371-0.61917,1.18371-1.37495l0.00454-6.29643    C34.33026,27.37819,34.79465,27.35996,35.24081,27.28716z"/><g><path class="st1" d="M10.27793,24.09561c0,1.11998,1.12909,1.78469,2.47671,1.99412     c0.44617,0.07284,0.91056,0.09105,1.36583,0.05463c1.56616-0.10016,3.01394-0.78308,3.01394-2.04875"/><path class="st1" d="M17.13774,24.09488c0,2.75728,6.86018,2.75728,6.86018,0"/><path class="st1" d="M23.99791,24.09488c0,2.75728,6.86018,2.75728,6.86018,0"/><path class="st1" d="M37.72207,24.09561c0,1.11998-1.1382,1.78469-2.48582,1.99412     c-0.44617,0.06374-0.91056,0.08195-1.36583,0.05463c-1.56615-0.10016-3.00483-0.78308-3.00483-2.04875"/><path class="st1" d="M10.27793,24.09561l3.14709-11.43638c0.16876-0.61327,0.72645-1.03823,1.36252-1.03823h18.42491     c0.63607,0,1.19376,0.42495,1.36252,1.03823l3.14709,11.43638"/></g><g><path class="st1" d="M12.75919,27.29625c0.44617,0.06374,0.91056,0.08195,1.36583,0.05463"/><path class="st1" d="M33.87497,27.34178c0.45528,0.03642,0.91966,0.01821,1.36583-0.05463"/></g><line class="st1" x1="16.37364" x2="24.56307" y1="13.86694" y2="13.86694"/><line class="st1" x1="27.77735" x2="30.0816" y1="13.86694" y2="13.86694"/></g></g></svg>

这个不可以

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1"/><g id="Layer_2"><g><path d="M408.5,215.1c-1.2-4.4,0.4-11.3,1.9-17.9c2.3-9.9,4.9-21.1-0.4-30.1c-5.3-9.2-16.4-12.6-26.2-15.5c-6.4-2-13.1-4-16.2-7.1    c-3.1-3.1-5.2-9.8-7.1-16.2c-3-9.8-6.3-20.9-15.5-26.2c-3.6-2.1-7.8-3.1-12.7-3.1c-5.7,0-11.7,1.4-17.4,2.7    c-5.2,1.2-10.1,2.3-14.3,2.3c-1.4,0-2.6-0.1-3.7-0.4c-4.1-1.1-9.1-5.8-13.9-10.3c-7.5-7.1-16.1-15.1-27-15.1s-19.4,8-27,15.1    c-4.8,4.5-9.8,9.2-13.9,10.3c-1,0.3-2.3,0.4-3.7,0.4c-4.1,0-9.1-1.1-14.3-2.3c-5.8-1.3-11.7-2.7-17.4-2.7c-5,0-9.1,1-12.7,3.1    c-9.2,5.3-12.6,16.4-15.5,26.2c-2,6.4-4,13.1-7.1,16.2c-3.1,3.1-9.8,5.2-16.2,7.1c-9.8,3-20.9,6.3-26.2,15.5    c-5.3,9.1-2.7,20.3-0.4,30.1c1.5,6.6,3.1,13.5,1.9,17.9c-1.1,4.1-5.8,9.1-10.3,13.9c-7.1,7.5-15.1,16.1-15.1,27s8,19.4,15.1,27    c4.5,4.8,9.2,9.8,10.3,13.9c1.2,4.4-0.4,11.3-1.9,17.9c-2.3,9.9-4.9,21.1,0.4,30.1c5.3,9.2,16.4,12.6,26.2,15.5    c6.4,2,13.1,4,16.2,7.1c3.1,3.1,5.2,9.8,7.1,16.2c3,9.8,6.3,20.9,15.5,26.2c3.6,2.1,7.8,3.1,12.7,3.1c5.7,0,11.7-1.4,17.4-2.7    c5.2-1.2,10.1-2.3,14.3-2.3c1.4,0,2.6,0.1,3.7,0.4c4.1,1.1,9.1,5.8,13.9,10.3c7.5,7.1,16.1,15.1,27,15.1s19.4-8,27-15.1    c4.8-4.5,9.8-9.2,13.9-10.3c1-0.3,2.3-0.4,3.7-0.4c4.1,0,9.1,1.1,14.3,2.3c5.8,1.3,11.7,2.7,17.4,2.7c5,0,9.1-1,12.7-3.1    c9.2-5.3,12.6-16.4,15.5-26.2c2-6.4,4-13.1,7.1-16.2c3.1-3.1,9.8-5.2,16.2-7.1c9.8-3,20.9-6.3,26.2-15.5    c5.3-9.1,2.7-20.3,0.4-30.1c-1.5-6.6-3.1-13.5-1.9-17.9c1.1-4.1,5.8-9.1,10.3-13.9c7.1-7.5,15.1-16.1,15.1-27s-8-19.4-15.1-27    C414.3,224.2,409.6,219.2,408.5,215.1z M407.8,272.7c-5.8,6.2-11.7,12.5-13.8,20.3c-2.2,8.1-0.1,16.8,1.8,25.2    c1.7,7.5,3.5,15.3,1.2,19.3c-2.4,4.1-10.1,6.4-17.6,8.7c-8.2,2.5-16.7,5.1-22.5,10.9c-5.8,5.8-8.4,14.3-10.9,22.5    c-2.3,7.5-4.6,15.2-8.7,17.6c-1.3,0.7-3,1.1-5.2,1.1c-4,0-8.9-1.1-14.1-2.3c-5.8-1.3-11.8-2.7-17.6-2.7c-2.8,0-5.2,0.3-7.5,0.9    c-7.8,2.1-14.1,8-20.3,13.8c-5.8,5.4-11.8,11-16.7,11s-10.9-5.6-16.7-11c-6.2-5.8-12.5-11.7-20.3-13.8c-2.3-0.6-4.8-0.9-7.5-0.9    c-5.8,0-11.8,1.4-17.6,2.7c-5.2,1.2-10,2.3-14.1,2.3c-2.2,0-3.9-0.4-5.2-1.1c-4.1-2.4-6.4-10.1-8.7-17.6    c-2.5-8.2-5.1-16.7-10.9-22.5c-5.8-5.8-14.3-8.4-22.5-10.9c-7.5-2.3-15.2-4.6-17.6-8.7c-2.3-4-0.5-11.7,1.2-19.3    c1.9-8.4,4-17.1,1.8-25.2c-2.1-7.8-8-14.1-13.8-20.3c-5.4-5.8-11-11.8-11-16.7c0-5,5.6-10.9,11-16.7c5.8-6.2,11.7-12.5,13.8-20.3    c2.2-8.1,0.1-16.8-1.8-25.2c-1.7-7.5-3.5-15.3-1.2-19.3c2.4-4.1,10.1-6.4,17.6-8.7c8.2-2.5,16.7-5.1,22.5-10.9    c5.8-5.8,8.4-14.3,10.9-22.5c2.3-7.5,4.6-15.2,8.7-17.6c1.3-0.7,3-1.1,5.2-1.1c4,0,8.9,1.1,14.1,2.3c5.8,1.3,11.8,2.7,17.6,2.7    c2.8,0,5.2-0.3,7.5-0.9c7.8-2.1,14.1-8,20.3-13.8c5.8-5.4,11.8-11,16.7-11s10.9,5.6,16.7,11c6.2,5.8,12.5,11.7,20.3,13.8    c2.3,0.6,4.8,0.9,7.5,0.9c5.8,0,11.8-1.4,17.6-2.7c5.2-1.2,10-2.3,14.1-2.3c2.2,0,3.9,0.4,5.2,1.1c4.1,2.4,6.4,10.1,8.7,17.6    c2.5,8.2,5.1,16.7,10.9,22.5c5.8,5.8,14.3,8.4,22.5,10.9c7.5,2.3,15.2,4.6,17.6,8.7c2.3,4,0.5,11.7-1.2,19.3    c-1.9,8.4-4,17.1-1.8,25.2c2.1,7.8,8,14.1,13.8,20.3c5.4,5.8,11,11.8,11,16.7C418.9,261,413.3,266.9,407.8,272.7z"/><path d="M198.9,234.6c19.7,0,35.6-16,35.6-35.6c0-19.7-16-35.6-35.6-35.6c-19.7,0-35.6,16-35.6,35.6    C163.3,218.6,179.3,234.6,198.9,234.6z M198.9,178.3c11.4,0,20.6,9.3,20.6,20.6c0,11.4-9.3,20.6-20.6,20.6s-20.6-9.3-20.6-20.6    C178.3,187.6,187.6,178.3,198.9,178.3z"/><path d="M313.1,277.4c-19.7,0-35.6,16-35.6,35.6c0,19.7,16,35.6,35.6,35.6c19.7,0,35.6-16,35.6-35.6    C348.7,293.4,332.7,277.4,313.1,277.4z M313.1,333.7c-11.4,0-20.6-9.3-20.6-20.6s9.3-20.6,20.6-20.6s20.6,9.3,20.6,20.6    S324.4,333.7,313.1,333.7z"/><path d="M339,173c-2.9-2.9-7.7-2.9-10.6,0L173,328.3c-2.9,2.9-2.9,7.7,0,10.6c1.5,1.5,3.4,2.2,5.3,2.2s3.8-0.7,5.3-2.2L339,183.7    C341.9,180.7,341.9,176,339,173z"/></g></g></svg>