Question

我有一个svg图标，我想让它旋转（加载）。这可能吗？我发现他们可以创建旋转图标的在线网站，但我还没有找到一个转换器，可以使现有的svg图标旋转。

Answer 1

＆＃13;

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

＆＃13;

<?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>

＆＃13;

Answer 2

如果您使用 bootstrap ，则可以像这样使用。

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

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

对于自定义SVG

尝试SVG rotate path

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

HTML code：

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

使现有SVG旋转（加载图标）

2 个答案: