SVGの中心コンテンツ

Question

私は以下のようなSVGを持っています。現在、サークルはSVG全体のサイズを取ります。どのように私はそれをこのように見えるようにすることができます：SVGは一定のサイズ（215x250と言う）を持ち、円はSVGの中心でサイズ16でなければなりません。この中心のサークルをアニメーション化するのも素晴らしいですので、ローディングスピナーのように見えます。

<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

まあバックイラストレーターにロードし、それをリサイズ以外の明白な答えは（:)二つの経路を拡大することですそれらを中心に動かす。

スケールは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" 
 
\t viewBox="0 0 300 300"> 
 
    <style type="text/css"> 
 
    \t .st0{fill:#292929;} 
 
    \t .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 
 
\t 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>