遇到在表格上画连接线的问题，需求助。_html/css_WEB-ITnose

canvas

想做一个类似这样的走势图，在表格中有数字的两个格子之间画一条线（斜线）用于连接。

网址：http://www.55128.cn/zs/1_4.htm


看了一下，貌似用到的是html5 canvas标签，但是我不明白的就是如何将此标签运用于标签上。

如果各位大神有相关示例，希望指教。谢谢。

回复讨论(解决方案)

效果如图。

用svg , IE vml 

用svg , IE vml 

svg 看到了，但是怎么使用在html 的

标签之上？

有示例么？

用svg , IE vml 

svg 看到了，但是怎么使用在html 的

标签之上？

有示例么？
 svg 绝对定位 position: absolute; 

 <svg width="800px" height="800px"  style="position: absolute; top:0;left:0"   > <line x1="0" y1="0" x2="100" y2="100" style="stroke:red;stroke-width:2"/> <line x1="50" y1="150" x2="100" y2="100" style="stroke:blue;stroke-width:2"/></svg> 	<table> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 	</table>

用svg , IE vml

svg 看到了，但是怎么使用在html 的

标签之上？

有示例么？
svg 绝对定位 position: absolute;

 <svg width="800px" height="800px"  style="position: absolute; top:0;left:0"   > <line x1="0" y1="0" x2="100" y2="100" style="stroke:red;stroke-width:2"/> <line x1="50" y1="150" x2="100" y2="100" style="stroke:blue;stroke-width:2"/></svg> 	<table> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 		<tr><td>1111111111111111111111111111111111111</td></tr> 	</table>

这个只能用绝对定位么？如果说每个格子中有数字的td取出来相连线，那么这种绝对定位坐标方式就用着不方便了。

 
这个只能用绝对定位么？如果说每个格子中有数字的td取出来相连线，那么这种绝对定位坐标方式就用着不方便了。
1。 取要连TD给的坐标,通过 offsetTop,offsetLeft取坐标，也不是很麻烦
2。 数据表格也是用svg 来画

 
这个只能用绝对定位么？如果说每个格子中有数字的td取出来相连线，那么这种绝对定位坐标方式就用着不方便了。
1。 取要连TD给的坐标,通过 offsetTop,offsetLeft取坐标，也不是很麻烦
2。 数据表格也是用svg 来画

谢谢了，琢磨了半天也没琢磨出来，在HTML中测试都行，一旦放入JSP页面中，就无法显示了。唉。。