具有特定寬度和高度的SVG文本

我試圖在SVG中放置和拉伸文本，在這個例子中，我希望文本具有4釐米的高度，但它似乎有一些填充！具有特定寬度和高度的SVG文本

<svg x="0px" y="0px" width="10cm" height="10cm"> 
<text x="0cm" y="4cm" font-family="'Arial'" font-size="4cm">Random text</text> 
</svg>

enter image description here

如何去除填充並設置文本具有完全相同的高度爲4cm？
如果在SVG中不可行，是否還有另一種矢量圖形格式，可以使用php輕鬆生成，並且可以執行此任務？

來源

2014-10-04 UnLoCo

你的意思是內部完全擬合[ ascender]（http://www.fontshop.com/glossary/）高4釐米？ ['']（http://www.w3.org/TR/SVG/text。html）只有'textLength'和'lengthAdjust'屬性，所以調整'font-size =「151pt」'最接近4cm高 – 2014-10-04 23:29:23

關於填充，dx屬性控制SVG對象內文本的位置。

像這樣：

<svg x="0px" y="0px" width="10cm" height="5.5cm" style="background: #ace; fill: #579;"> 

    <text dx="-0.3cm" x="0cm" y="4cm" font-family="Arial" font-size="4cm">Hello</text> 

</svg>

注意，DX屬性設置爲-0.3cm其移出的文本向左。

來源

2014-10-04 23:37:23

文本實際上是動態的！問題是我無法使用腳本來計算任何東西，因爲我從PHP生成svg並將其嵌入到PDF中！ – UnLoCo 2014-10-05 00:17:56

文本填充的高度取決於字體的設計方式。在你的例子中，'H'不能擴展「em」測量的整個高度。將會出現低於基線的字形（如「y」，「g」等）和達到較高的字形（例如，重音符號）。

您可以通過選擇大於所需垂直大小的字體大小來進行補償。對於特定字體，字體大小與呈現高度的比率應該是不變的。所以一旦你找出正確的比例，你可以用它來處理任何文字。

例如，看看下面的例子

<svg x="0px" y="0px" width="20cm" height="20cm" font-family="Arial"> 

    <!-- text to fit 4cm high rectangle --> 
    <rect x="0" y="1cm" width="100%" height="4cm" fill="red" fill-opacity="0.2"/> 
    <text x="0cm" y="5cm" font-family="'Arial'" font-size="4cm"> 
     <tspan font-size="1.4em">Random text</tspan> 
    </text> 

</svg>

我想使文本填充紅色矩形的高度。我首先將字體大小設置爲4cm，然後使用<tspan>將字體大小調整爲1.4em。對於Arial，這是資本的高度和em尺寸之間的比率。我只是通過實驗發現了這一點。

現在我知道這個比例，我可以再次用於不同的字體大小：

<svg x="0px" y="0px" width="20cm" height="20cm" font-family="Arial"> 

    <!-- text to fit 3cm high rectangle --> 
    <rect x="0" y="7cm" width="100%" height="3cm" fill="red" fill-opacity="0.2"/> 
    <text x="0cm" y="10cm" font-family="'Arial'" font-size="3cm"> 
     <tspan font-size="1.4em">Random text</tspan> 
    </text> 

</svg>

我已經改變了字體大小3釐米，但我可以重用1.4比例使其適合新尺寸。

Demo fiddle here

可惜，這招只適用於高度，這是爲特定的字體大小不變。沒有簡單的方法讓一段文字適合特定的寬度。除了應用自定義transform或修改font-size-adjust爲每個文本。

來源

2014-10-05 09:36:37

謝謝，它增加了我的知識 – UnLoCo 2014-10-05 17:11:10

這是我能想出

<svg width="500px" height="500px" style="background: #EEE"> 
    <text x="0" y="0" style="dominant-baseline: hanging;font-size:500px" 
    textLength="100%" lengthAdjust="spacingAndGlyphs">Hello</text> 
</svg>

目前仍然在底部邊緣的最佳解決方案，使文本不箱子

demo

來源

2015-05-29 23:22:17 UnLoCo

具有特定寬度和高度的SVG文本

回答

相關問題