SVG的中心内容

我有如下的SVG。现在这个圆圈占据了整个SVG的大小。我怎样才能让它看起来像这样：SVG具有一定的大小（比如说215x250），并且圆圈的大小应该在svg的中心。对于这个居中的圆来说，这也会非常棒，所以它看起来像一个加载微调器。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

这就是我想实现：

来源

2017-08-09 user1091733

你在你的问题发布的SVG看上去一点也不像你张贴的图片。： -/ –

那么明显的答案（不是加载它放回Illustrator和调整大小等:)是缩放两个路径向下并将它们移动到中心。

规模将需要是16/300 = 0.053。并且要将16x16的东西移动到300x300的中心，则需要将其移动到（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>

来源

2017-08-09 12:15:42

非常好，谢谢！ – user1091733

SVG的中心内容

回答

相关问题