我正在尝试在 SVG 文档中创建一个类似表格的对象。目前，由于 SVG 没有表格元素，我正在使用 HTML 解析器将 HTML 表格（由用户在 HTML 表格生成器中创建）转换为一组 SVG 对象，以及然后将其添加到我的整体 SVG 绘图中。我想知道是否有人能够找到这种方法的更好替代方法，例如 SVG 表格生成器？我正在寻找使用 Javascript 或 jquery 来完成此操作。任何想法或建议将不胜感激。原文由 RestingRobot 发布，翻译遵循 CC BY-SA 4.0 许可协议

在 SVG 中创建表格

2 个回答

发布于
2022-12-08

✓ 已被采纳

我会简单地在我的 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>

原文由 Phrogz 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

1

发布于
2022-12-08

你可以使用这种方式：

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>

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

原文由 jacksonfdam 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

在 SVG 中创建表格

你尚未登录，登录后可以

扁平化数组转换成树形?

js 如何将Key属性相同的放在同一个数组？

省市区街道数据在哪里可以下载？

两个promise问题？

Object assgin拷贝问题？

js如何在并发中同步两个fetch请求？

Vue项目一个报错无法找到原因?

Stack Overflow 翻译