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

好吧，显而易见的答案（除了将其加载回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>