Центр содержания SVG

Question

У меня есть такой SVG как ниже. Прямо сейчас круг занимает весь размер SVG. Как сделать так, чтобы SVG имел определенный размер (скажем, 215x250), а круг должен иметь размер 16 в центре 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

Вот чего я пытаюсь добиться:

Answer 1

Ну, очевидный ответ (кроме загрузки его обратно в Illustrator и изменения его размера:) заключается в уменьшении этих двух путей и перемещении их в центр.

Шкала должна быть 16/300 = 0,053. И переместить что-то, что 16x16 к центру 300x300 viewBox, вам нужно будет переместить его в (142,142).

Если вы хотите, чтобы SVG был 215x250, то сделайте его таким width а также height,

Наконец, для поворота вы можете просто использовать <animateTransform> элемент.

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>