在SVG中對齊文本

我正在嘗試使用混合的行和簡短文本片段（通常爲兩個或三個單詞）來製作SVG XML文檔。我遇到的主要問題是讓文本與線段對齊。在SVG中對齊文本

對於水平取向，我可以使用text-anchor與left，middle或right。我無法找到垂直對齊的等價物; alignment-baseline似乎沒有做到這一點，所以目前我使用dy="0.5ex"作爲中心對齊的混合物。

是否有正確的方式與文字的垂直中心或頂部對齊？

來源

2008-09-11 Ian G

+17

我認爲您的橫向假設存在錯誤。根據http://www.w3.org/TR/SVG/text.html#TextAnchorProperty，「text-anchor」的允許值是`start |中間|結束| inherit`。不允許「左」和「右」。 – Juve 2012-08-03 08:35:03

事實證明，您不需要明確的文本路徑。 Firefox 3只支持垂直對齊標籤（see this thread）。似乎主導基線只在作爲樣式應用時才起作用，而文本錨可以成爲樣式或標籤屬性的一部分。

<path d="M10, 20 L17, 20" 
     style="fill:none; color:black; stroke:black; stroke-width:1.00"/> 
<text fill="black" font-family="sans-serif" font-size="16" 
     x="27" y="20" style="dominant-baseline: central;"> 
    Vertical 
</text> 

<path d="M60, 40 L60, 47" 
     style="fill:none; color:red; stroke:red; stroke-width:1.00"/> 
<text fill="red" font-family="sans-serif" font-size="16" 
     x="60" y="70" style="text-anchor: middle;"> 
    Horizontal 
</text> 

<path d="M60, 90 L60, 97" 
     style="fill:none; color:blue; stroke:blue; stroke-width:1.00"/> 
<text fill="blue" font-family="sans-serif" font-size="16" 
     x="60" y="97" style="text-anchor: middle; dominant-baseline: hanging;"> 
    Bit of Both 
</text>

此工程適用於Firefox。不幸的是，Inkscape似乎沒有處理主導基線（或者至少不是以相同的方式）。

來源

2008-09-16 14:57:13

不幸的是，截至2011年11月，Firefox仍然是唯一支持「顯性 - 基線」的瀏覽器。我仍然需要設置1/2字體大小的'`。 – Travis 2011-11-21 19:01:24

確實可以通過將alignment-baseline設置爲central或middle來實現這種效果。

來源

2014-05-15 14:25:49 mjswensen

在SVG中對齊文本

回答

相關問題