如何讓文字具有所需的高度和寬度？

我需要獲得具有所需高度和寬度的文本。我試圖找到在SVG的文件的東西，但發現只有font-size，也是我試圖以這種方式使用規模：如何讓文字具有所需的高度和寬度？

<text xmlns="http://www.w3.org/2000/svg" id="10996080909940" name="-1" 
x="1782.9351809218" y="-751.796133712862" width="1" height="1" style="font:Arial;text- 
anchor:start;stroke:#000000" transform="rotate(0) scale(2 2)"> SOME TEXT </text>

，但我得到的文本太大大小的地方不是我需要的和。

來源

2013-10-21 adelak

不太確定爲什麼在寬度/高度之後。作爲使用字體大小的示例，http://jsfiddle.net/emCqs/不能像這樣定位/大小。還是有一個特定的要求，你需要適應動態文本的形狀，或其他？ – Ian

如果你的意思是你想讓文本精確地填充任意的寬度和高度，那麼在SVG中並不是一個簡單的方法。您無法在<text>元素上指定寬度和高度。至少不在當前的SVG規範（1.1）中。

但是有幾種方法可以通過一些技巧來達到這種效果。

一種方式是通過使用變換，因爲你提示：

<svg> 

    <text font-size="10px" font-family="Verdana" transform="translate(99,400) scale(3.5,13.7)">SQUASHED TEXT</text> 
    <rect x="100" y="300" width="300" height="100" fill="none" stroke="red" /> 

</svg>

的第二種方式是通過使用一個內<svg>元件和設置視框匹配的文本的邊界。然後您設置preserveAspectRatio="none"。

<svg> 

    <svg x="100" y="100" width="300" height="100" viewBox="0.2 -7.3 86 7.3" preserveAspectRatio="none" overflow="visible"> 
     <text font-size="10px" font-family="Verdana">SQUASHED TEXT</text> 
    </svg> 
    <rect x="100" y="100" width="300" height="100" fill="none" stroke="red" /> 

</svg>

這種方式是更詳細的，但它有，一旦你找到正確的視框的一段文字的優勢，可以使其很容易適應任何尺寸的矩形。只需將內部<svg>的x,y,width和height設置爲矩形的大小即可。

此處演示：http://jsfiddle.net/ZRgEF/3/

來源

2013-10-22 06:55:03

如何讓文字具有所需的高度和寬度？

回答

相關問題