在svg中居中一個字符

我正在尋找一個包含一個ascii字符（比如'g'或'W'）的SVG文件，該文件位於100 x 100窗口中心的任意字體中。這是我得到的最接近，但它不是很正確...在svg中居中一個字符

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox="0 0 100 100" 
    xmlns="http://www.w3.org/2000/svg" version="1.1"> 

    <text x="50" y="50" font-size="100px" 
     text-anchor="middle" alignment-baseline="middle">g</text> 
</svg>

來源

2014-10-28 Arthur B.

SVG本身沒有自動垂直佈局功能;你需要其他的東西來計算盒子的高度，比如JavaScript或者...

看起來像你正在將它嵌入到網絡瀏覽器中。如果是這樣，那麼您可以使用HTML的自動佈局功能爲您完成此操作，使用<foreignObject>在您的SVG內嵌入一個HTML片段，其內容爲display:table-cell; vertical-align:middle。

來源

2014-10-28 03:17:01 Phrogz

實際上，我正在嘗試導出到PNG使用imagemagick，所以沒有瀏覽器:( – 2014-10-28 03:20:58

@ArthurB。啊，那麼我的答案的部分將無濟於事你爲什麼要在你的文檔中使用DOCTYPE，雖然？僅供參考，描述SVG文件的推薦方法是：' Phrogz 2014-10-28 03:23:22

複製粘貼我認爲^^ – 2014-10-28 03:24:08

沒有通用的方法來在SVG垂直居中文本。

最好的辦法是制定出基線（<text>y屬性）應該用於特定字體和字符組（例如所有大寫字母）的位置。

來源

2014-10-28 03:15:57

你確定嗎？對齊基線具有「中間」屬性，該屬性對於我的目的而言足夠接近字符的中心... 參見http://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty 和http： //apike.ca/prog_svg_text_style.html – 2014-10-28 03:17:53

這取決於SVG渲染器是否支持「alignment-baseline」（AFAIK並非全部都是這樣）並且該字體具有基準表。此外，它以字體爲中心，而不是單個字符。 – 2014-10-28 03:25:45

在svg中居中一個字符

回答

相關問題