具有特定宽度和高度的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文本

回答

相关问题