在SVG中操作/翻译<text>(添加边界框)

Question

问题:我们需要复制在RaphaelJS中创建的SVG文本,其中SVG中的字体,字体,位置,比例,旋转可变.

但是...... Raphael使用了一个文本边界框,其高度与字符串的实际高度无关.边界框的高度基于font-size和font-family,但与实际字符串无关.因此,一串"Y"和","(具有相同的font-face和font-size)具有相同的高度.

当我们在SVG中重新创建文本时(通过在PHP中生成它),我们可以得到正确的字体大小,并且字体系列正确.但是,SVG的高度并不独立于实际的字符串.因此,","将具有比"Y"低得多的高度.这种高度差异打破了旋转和定位.

问题:我们如何使用复制RaphaelJS的getBBox的'边界框'创建svg(它基本上只是一个适合其中任何字符的框的尺寸),所以我们可以模仿RaphaelJS的旋转和定位？注意:如果有帮助,我们可以转换SVG的text-> path.我们还可以访问字体文件.

编辑:通过使用matrix()命令并直接转换转换来解决问题,而不是应用定位,然后缩放,然后旋转.

Answer 1

如果您希望操纵单词中的字符位置：句子和您在服务器上生成的 SVG，那么您应该能够利用 SVG TSPAN 并确定字符位置。如果您可以将字母更改为路径，那么我认为该算法是可能的。没有什么可以阻止您为字母数字字体集创建相对位置数组。我希望上面的一些内容有用......