如何让SVG在其中心旋转？

我需要从给定的SVG中创建一个微调器。我很难在自己的中心旋转。我怎样才能做到这一点？如何让SVG在其中心旋转？

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{fill:#292929;} 
    .st1{fill:#D5D5D5;} 
</style> 
<path class="st0" d="M150,35c63.5,0,115,51.5,115,115s-51.5,115-115,115S35,213.5,35,150c0-27.9,10-53.6,26.5-73.5L34.7,54 
    C13.1,80,0,113.5,0,150c0,82.8,67.2,150,150,150s150-67.2,150-150S232.8,0,150,0V35z"/> 
<path class="st1" d="M150,0C103.7,0,62.3,21,34.7,54l26.8,22.5C82.6,51.2,114.4,35,150,35V0z"/> 
</svg>

JSFiddle

来源

2017-08-01 user1091733

@-webkit-keyframes rotate { 
 
    from { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 

 
svg.rotate 
 
{ 
 
    -webkit-animation-name:    rotate; 
 
    -webkit-animation-duration:   0.5s; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-timing-function: linear; 
 
}

<svg class="rotate" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
    viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve"> 
 
<style type="text/css"> 
 
    .st0{fill:#292929;} 
 
    .st1{fill:#D5D5D5;} 
 
</style> 
 
<path class="st0" d="M150,35c63.5,0,115,51.5,115,115s-51.5,115-115,115S35,213.5,35,150c0-27.9,10-53.6,26.5-73.5L34.7,54 
 
    C13.1,80,0,113.5,0,150c0,82.8,67.2,150,150,150s150-67.2,150-150S232.8,0,150,0V35z"/> 
 
<path class="st1" d="M150,0C103.7,0,62.3,21,34.7,54l26.8,22.5C82.6,51.2,114.4,35,150,35V0z"/> 
 
</svg>

从here

来源

2017-08-01 16:05:29

我提高你的答案建立一个有效的解决方案结合您的CSS和原始的HTML。希望你不要介意，我只是觉得比提供复制你的另一个答案要好。 – Dinei

如何让SVG在其中心旋转？

回答

相关问题