Wie kann man Svg über seine Mitte drehen lassen?

Question

Ich muss einen Spinner aus gegebenen SVG machen. Es fällt mir schwer, mich über sein eigenes Zentrum zu drehen. Wie kann ich das erreichen?

<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

Answer 1

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

Von here