如何获取服务器上 SVG 文本的各个字符位置
我正在编写服务器端软件，该软件通过在 SVG 中生成单独的帧并使用 rsvg-convert 渲染为 PNG 来制作电影。该电影需要对 SVG 中的文本逐个字符应用效果。对于 SVG 文本元素，我无法对每个字符应用单独的样式，因此我必须为每个字符使用单独的文本元素来渲染文本。
我的问题是：获取每个字符的 x 轴位置的最佳方法是什么，这样当我逐个字符绘制文本时，它看起来与绘制的文本相同 具有单个文本元素。
IE ..
这是我的一种解决方案：在浏览器上准备动画时，使用 SVG 文本元素的 getExtentOfChar() 方法并将该元数据传递到服务器。我不喜欢这个，因为它让我对浏览器实现的变化、安装的字体、浏览器错误等持开放态度。此外，它使测试变得困难，并阻止我从脚本自动生成这些电影。
我怀疑我需要直接使用 freetype2 或 Pango 库，但我希望有人已经解决了这个问题。
I'm writing server-side software that makes a movie by generating individual frames in SVG and rendering to PNG with rsvg-convert. The movie requires an effect to be applied to text in the SVG on a character-by-character basis. With the SVG text element I cannot apply separate styles to each character, so I must render the text using individual text elements for each character.
My question is: what's the best way of obtaining the x-axis positions of each character, so that when I draw the text character-by-character it will look identical to the text drawn
with a single text element.
ie ..<text x="100" y="100">aic</text> identical to <text x="?" y="100">a</text>
<text x="?" y="100">i</text> <text x="?" y="100">c</text>
This is one solution I have: when preparing the animation on the browser, use the getExtentOfChar() method of the SVG text element and pass that metadata to the server. I don't like this because it leaves me open to variations in browser implementations, installed fonts, browser bugs etc. Also it makes testing difficult and prevents me from generating these movies automatically from a script.
I suspect I'll need to work directly with the freetype2 or Pango library, but I'm hoping someone has solved this problem already.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果将字符包裹在 tspan 中，则可以设置它们的样式： http://jsfiddle.net/longsonr/qxe4S/ 是不是容易多了？
If you wrap the characters in tspans you can style them: http://jsfiddle.net/longsonr/qxe4S/ isn't that much easier?