既存のSVGを回転させる（ローディングアイコン）

Question

私はSVGアイコンを持っていて、回転させたい（ロードする）。これは可能ですか？私は彼らが回転アイコンを作成できるオンラインサイトを見つけましたが、私は既存のsvgアイコンを回転させるコンバータを見つけていません。

Answer 1

@keyframes spin { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(359deg); } 
 
} 
 
#star { 
 
    animation: spin 2s linear infinite; 
 

 
}

<?xml version="1.0" standalone="no"?> 
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
 
<svg id=star width="4cm" height="4cm" viewBox="0 0 700 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <polygon fill="red" stroke="red" stroke-width="10" 
 
      points="350,75 379,161 469,161 397,215 
 
        423,301 350,250 277,301 303,215 
 
        231,161 321,161" /> 
 
    
 
</svg>

Answer 2

ブートストラップを使用している場合は、このように使用できます。

例：<i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>

を試みるカスタムSVGについて

http://www.w3schools.com/icons/fontawesome_icons_spinner.asp

SVG rotate path

例：http://jsfiddle.net/YEA7T/

HTMLコード：

IMG <Br /> 
<img src="http://www.clker.com/cliparts/o/U/X/K/9/p/gear-hi.png" class="gear" witdth="60" height="60" /> 
<Br /> 
SVG<Br /> 
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px" width="319.046px" height="168.518px" viewBox="0 0 319.046 168.518" xml:space="preserve"> 

<path fill="#000000" class="gear" d="M189.857,70.346l-10.563-3.885c-1.063,2.165-2.405,4.178-3.978,5.992l7.143,8.659l-5.782,4.958l-7.099-8.605 
    c-1.988,1.293-4.169,2.335-6.495,3.077l1.915,11.108L157.566,93l-1.931-11.188c-2.404,0.065-4.762-0.199-7.029-0.757l-3.873,10.835 
    l-7.088-2.61l3.948-11.043c-1.99-1.149-3.829-2.558-5.478-4.179l-9.018,7.729l-4.847-5.875l9.229-7.91 
    c-1.076-1.911-1.939-3.978-2.549-6.172l-12.118,2.206l-1.302-7.564l12.393-2.259c0.001-2.184,0.257-4.326,0.746-6.392l-12.01-4.418 
    l2.587-7.23l12.193,4.487c1.011-1.822,2.229-3.516,3.608-5.063l-8.405-10.191l5.783-4.955l8.445,10.235 
    c1.71-1.076,3.551-1.971,5.506-2.646l-2.274-13.166l7.436-1.356l2.255,13.085c2.095-0.11,4.155,0.024,6.153,0.391l4.422-12.366 
    l7.09,2.61L167.087,29.4c1.907,0.961,3.694,2.145,5.33,3.531l9.569-8.2l4.848,5.875l-9.348,8.008 
    c1.228,1.843,2.249,3.854,3.021,6.01l11.76-2.143l1.307,7.563L182.09,52.14c0.171,2.391,0.029,4.747-0.392,7.025l10.746,3.952 
    L189.857,70.346z"/> 

</svg> 

CSS

.gear { 
    -webkit-animation: rotation 2s infinite linear; 
    -moz-animation: rotation 2s infinite linear; 
    -o-animation: rotation 2s infinite linear; 
    animation: rotation 2s infinite linear; 
    transform-origin: 50% 50%; 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
} 

@-webkit-keyframes rotation { 
    from {-webkit-transform: rotate(0deg);} 
    to {-webkit-transform: rotate(359deg);} 
} 
@-moz-keyframes rotation { 
    from {-moz-transform: rotate(0deg);} 
    to {-moz-transform: rotate(359deg);} 
} 
@-o-keyframes rotation { 
    from {-o-transform: rotate(0deg);} 
    to {-o-transform: rotate(359deg);} 
} 
@keyframes rotation { 
    from {transform: rotate(0deg);} 
    to {transform: rotate(359deg);} 
}