在SVG中创建一个表

Question

在SVG中创建一个表

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

Answer 1

Phr*_*ogz 26

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

<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="10" y="10" width="100" height="150">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <table><!-- ... --></table>
    </body>
  </foreignObject>
  <!-- ... -->
</svg>

Run Code Online (Sandbox Code Playgroud)

chrome对ForeignObject的支持确实不稳定。这是一个耻辱。因此，我不得不诉诸于使用本机svg元素来实现很多事情。对于初学者来说，存在一些渲染错误。如果在其周围拖动异物，将留下阴影，这些阴影在页面滚动后消失，但分散了核心的注意力。SVG转换不适用于chrome中的异物元素。Firefox并非如此。 (2认同)
“ foreignobject”应拼写为“ foreignObject”。 (2认同)
@谢恩谢谢你。令我惊讶的是，错误的大小写在这个答案中存在了近 5 年。:) (2认同)

Answer 2

小智 16

你可以用这种方式:

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

例:

<?xml version='1.0' standalone='no'?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN'
  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>

   <title>SVG Table</title>

   <g id='columnGroup'>
      <rect x='65' y='10' width='75' height='110' fill='gainsboro'/>
      <rect x='265' y='10' width='75' height='110' fill='gainsboro'/>

      <text x='30' y='30' font-size='18px' font-weight='bold' fill='crimson'>
         <tspan x='30' dy='1.5em'>Q1</tspan>
         <tspan x='30' dy='1em'>Q2</tspan>
         <tspan x='30' dy='1em'>Q3</tspan>
         <tspan x='30' dy='1em'>Q4</tspan>
      </text>

      <text x='100' y='30' font-size='18px' text-anchor='middle'>
         <tspan x='100' font-weight='bold' fill='crimson'>Sales</tspan>
         <tspan x='100' dy='1.5em'>$ 223</tspan>
         <tspan x='100' dy='1em'>$ 183</tspan>
         <tspan x='100' dy='1em'>$ 277</tspan>
         <tspan x='100' dy='1em'>$ 402</tspan>
      </text>

      <text x='200' y='30' font-size='18px' text-anchor='middle'>
         <tspan x='200' font-weight='bold' fill='crimson'>Expenses</tspan>
         <tspan x='200' dy='1.5em'>$ 195</tspan>
         <tspan x='200' dy='1em'>$ 70</tspan>
         <tspan x='200' dy='1em'>$ 88</tspan>
         <tspan x='200' dy='1em'>$ 133</tspan>
      </text>

      <text x='300' y='30' font-size='18px' text-anchor='middle'>
         <tspan x='300' font-weight='bold' fill='crimson'>Net</tspan>
         <tspan x='300' dy='1.5em'>$ 28</tspan>
         <tspan x='300' dy='1em'>$ 113</tspan>
         <tspan x='300' dy='1em'>$ 189</tspan>
         <tspan x='300' dy='1em'>$ 269</tspan>
      </text>
   </g>
</svg>

Run Code Online (Sandbox Code Playgroud)

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

@TheRedPea：在链接页面上，您还可以看到面向行的变体。 (2认同)

Answer 3

小智 6

我有类似的需求，但无法找到合适的工具来自动构建 SVG 图像来显示表格数据（我可以通过 Google 找到的工具产生难以辨认或无法使用的结果），因此我构建了自己的工具。您或在搜索此类工具时登陆此页面的任何其他人可能会发现它很有帮助：

https://topherrhodes.com/svg-table/

该工具使用 CSV 作为输入，因此如果您必须从 HTML 表进行操作，您可以修改脚本以将表转换为 JavaScript 对象，或者生成 CSV 作为中间步骤。

一般来说，我同意这里的其他用户的观点，他们提出 SVG 不是显示表格数据的良好格式，并且为了可用性和兼容性，您应该尽可能选择使用实际的 HTML 表格。但在某些情况下这是不可能的。

归档时间：	14 年，4 月前
查看次数：	28446 次
最近记录：	8 年，11 月前