SVG中的viewbox和圖標定位

我剛纔有這個非常簡單的svg;SVG中的viewbox和圖標定位

<div> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful"> 
    <g stroke="#ccc"> 
    <line x1="133" y1="50" x2="140" y2="40" stroke-width="2"></line> 
    </g> 
    <g stroke="#ccc"> 
    <line x1="140" y1="40" x2="200" y2="40" stroke-width="2"></line> 
    </g> 
    <circle cx="100" cy="100" r="57" class="border" fill="#eee" stroke="none" stroke-width="15" stroke-dasharray="360" transform="rotate(-90,100,100)"></circle> 
    <circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="#3498DB" stroke-width="5" stroke-dasharray="180, 20000" transform="rotate(-90,100,100)"></circle> 
    <text text-anchor="middle" x="100" y="110" class="icon" style="font-size: 40px" fill="#3498DB"></text> 
    <text class="timer" text-anchor="middle" x="175" y="35" style="font-size: 22px; undefined;" fill="#aaa">50%</text> 
</svg> 

</div>

FIDDLE HERE

svg元素的視框是viewBox="0 0 194 300"並在圖標的屬性y是y="110"，我的問題是，爲Y attibute有意110 ??

I.E.如果我想中心的圖標，我將做到以下幾點：

(186/2)+ (height of icon/2) // 186 is the height of the viewbox

我是正確的假設，110的值就加到視框的高度？

來源

2016-04-04 Alexander Solonik

110的y值將被作者選中以便將文本垂直居中在圓中。它與viewBox沒有直接關係。它與圓的中心，文本的大小（22）以及某種程度上使用任何字體的字形的形狀有關。例如，對於給定相同字體大小的不同字體，大寫字母的高度可能會有所不同。

SVG不提供任何方式來自動垂直居中文本。所以你必須手動定位文本。

來源

2016-04-04 09:56:31

所以選擇110的主要原因是因爲圓的大小是100？當然還有你提到的其他原因！ –

與圈子的大小無關。這個圈子有多大並不重要。這裏圓的直徑是114（半徑= 57）。但它可能是200，y座標不會改變。圓的中心在y = 100。字體大小爲22.因此，文本的基線（y座標）將在大約100+（22/2）= 111處。那麼由於字體的形狀，可能（如在這種情況下）稍微調整了一點。 –

都能跟得上

dominant-baseline="central" 
x="100"

100是圓的上下方向的中心（在圓圈元件ry）和dominant-baseline設置文本Y座標到文本的垂直中心。

來源

2016-04-04 00:41:23 seahorsepip

是的，我知道那個伎倆，我只是在近似說話。 :) –

我只是基本上想知道110是在那裏記住的，因爲視圖框的高度是186！ :) –

在jsfiddle視框的高度是300：/ – seahorsepip

SVG中的viewbox和圖標定位

回答

相關問題