在SVG中创建一个表

我正在尝试在SVG文档中创建一个类似于表的对象。 目前，由于SVG没有表元素，我使用HTML解析器将HTML表（由HTML表生成器中的用户创建）转换为一组SVG对象，并且然后将其添加到我的整体SVG绘图中。 我想知道是否有人能够找到更好的替代方法，例如SVG表构建器？ 我想用Javascript或jquery来完成这个。 任何想法或建议将不胜感激。

Answer 1

我只想在我的SVG中嵌入一个真正的表格：

Answer 2

你可以用这种方式：

SVG中没有“table”类型的元素，但您可以使用“text”和“tspan”元素实现类似的视觉和交互效果。 左边是2个这样的表格表示，最上面的一个是柱状布局（也就是说，用户可以选择列中的所有文本），而底部表格是基于行的布局。 这种方法的一个明显缺点是您无法创建具有垂直和水平选择性的表。 一个不太明显的缺陷是创建表格外观并不能赋予真实表格的语义质量，这对可访问性是不利的，并且不利于丰富的交互性和导航

例：

资料来源： http ： //svg-whiz.com/svg/table.svg

Answer 3

下面是一个显示SVG foreignobject的示例，其中包含嵌套SVG元素的表格布局。 它只适用于Chrome。

它包括HTML 表格布局和使用div元素的flexbox布局。

这里有一个小提琴手。

Answer 4

我在github上找到了一个项目，它从JavaScript数据结构中自动生成一个类似HTML的表： https ： //github.com/cocuh/SVG-Table

由于它不依赖于foreignObject，因此跨浏览器的可移植性要好得多。

Answer 5

我只是想为后代添加我的想法。 那里有很多相当复杂的选项，但如果你只是想要一个看起来像桌子的东西，这可能会让你开始……

 //assuming you have a table with an ID of src_table var my_svg = '
 tag. If it's not, just use the .html() of the  element (this).children('p').each(function(){ t_offset = $(this).offset(); var this_text = ''; // Look for 
 tags and split them onto new lines. var this_lines = $(this).html().split('
'); for(var i=0;i'+this_lines[i]+''; } this_text += ''; my_svg += this_text; }) } }); my_svg += '
'; //Either append my_svg to a div or pass the code onto whatever else you need to do with it. 

这显然很粗糙，但可能会让你开始走上正轨。