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的中心內容

回答

相關問題