在SVG上显示文本

Question

我有一个非常图形的网站，我用svg渲染。我遇到的问题是我需要在图像上显示一些文字，并且因为大多数浏览器不支持元素中的自动换行，所以我使用<foreignObject>添加<div>在svg里面。

虽然这在Firefox中的效果相对较好，但Chrome处理的效果非常差。我想知道我是否应该尝试在html中创建一个<div>浮动帧，但我认为很难一致地定位这个元素。那么，有没有人有任何想法？这是我正在处理的页面的链接：http://okcomputerstl.com/K9_Athletic_Club/services.html

Answer 1

查看RaphaelJS。

1. 它本质上是一个高级SVG的跨浏览器框架。
2. 它有良好的文档和支持（sencha）
3. 2.1版
正在成熟
4. 免费。

这是一篇文字example。根据我的经验，它确实排版。

Answer 2

如果您的内容需要自动流式布局，请使用HTML，然后根据需要添加svg边框或背景。

如果您的内容主要是图形，并且您不需要自动流程布局，则完全避免使用foreignObject并使用一个或多个＆lt; text＆gt;而不是元素。

SVGWeb不会在所有AFAIK上处理foreignObject（或svg中的html）。