Center content of SVG

问题:

I have such SVG as below. Right now the circle takes the whole size of SVG. How can I make it look like this: the SVG has a certain size (let's say 215x250) and the circle should be of size 16 in the center of svg. Would be also great to animate this centered circle so it looks like a loading spinner.

<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

This is what I am trying to achieve:

回答1:

Well the obvious answer (other than loading it back into Illustrator and resizing it :) is to scale the two paths down and move them to the centre.

The scale would need to be 16/300 = 0.053. And to move something that is 16x16 to the centre of a 300x300 viewBox, you would need to move it to (142,142).

If you want the SVG to be 215x250, then style it with that width and height.

Finally, for the rotation, you can just use an <animateTransform> element.

svg {
  width: 215px;
  height: 250px;
  border: blue 1px solid;
}

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 viewBox="0 0 300 300">
  <style type="text/css">
  	.st0{fill:#292929;}
  	.st1{fill:#D5D5D5;}
  </style>
  <g transform="translate(142,142) scale(0.053)">
    <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"/>
    <animateTransform attributeName="transform" type="rotate"
                      from="0 150 150" to="360 150 150"
                      dur="1s" repeatDur="indefinite" additive="sum"/>
  </g>
</svg>