Create a table in SVG
I'm trying to create a table-like object within an SVG document. Currently, due to the fact that SVG does not have a table element, I am using an HTML parser to go through and convert an HTML table, (created by the user in an HTML table Builder), to a group of SVG objects, and then adding that to my overall SVG drawing. I was wondering if any one was able to find a better al开发者_运维问答ternative to this method, such as an SVG table builder? I'm looking to accomplish this using Javascript or jquery. Any ideas or suggestions would be appreciated.
I would simply embed a real table in my 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>
U can use this way:
There are no 'table'-type elements in SVG, but you can achieve a similar visual and interactive effect using the 'text' and 'tspan' elements. On the left are 2 such tabular representations, the top one with columnar layout (that is, the user can select all the text in a column), and the bottom table with row- based layout. An obvious disadvantage to this approach is that you cannot create a table with both vertical and horizontal selectivity. A less obvious flaw is that creating a tabular appearance does not confer the semantic qualities of a real table, which is disadvantageous to accessibility and is not conducive to rich interactivity and navigation
Example:
<?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>
Source: http://svg-whiz.com/svg/table.svg
I had a similar need and was not able to find a suitable tool for automatically building an SVG image to display tabular data (the tools I could find via Google produced illegible or otherwise unusable results) so I built my own. You or anyone else who lands on this page while searching for such a tool may find it helpful:
https://topherrhodes.com/svg-table/
This tool uses a CSV as input, so if you have to go from an HTML table you could modify the script to convert the table to a JavaScript object, or generate a CSV as an intermediate step.
Generally, I agree with the other users here who have brought up how SVG is not a good format for displaying tabular data and that for usability and compatibility you should opt to use an actual HTML table whenever possible. But there may be certain cases where that's not possible.
I just wanted to add my thoughts on this for posterity. There are a lot of fairly complicated options out there but if you just want something which looks like a table, this might get you started...
//assuming you have a table with an ID of src_table
var my_svg = '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg_table" width="'+$("#src_table").width()+'px" height="'+$("#src_table").height()+'px">'
var table_offset = $('#src_table').offset();
$('#src_table').find('td').each(function() {
//Add a rectangle for each <td> in the same place in SVG as the <td> is in relation to the top left of where the table is on page
my_svg += '<rect x="'+(this_offset.left - table_offset.left)+'" y="'+(this_offset.top - table_offset.top)+'" width="'+$(this).width()+'" height="'+$(this).height()+'" stroke="black" stroke-width="'+$(this).css('border-width').replace('px','')+'"/>';
//Text is assumed to be in a <p> tag. If it's not, just use the .html() of the <td> element
(this).children('p').each(function(){
t_offset = $(this).offset();
var this_text = '<text x="'+(t_offset.left - table_offset.left)+'" y="'+(t_offset.top - table_offset.top)+'" style="font-size:'+$(this).css('font-size')+'; fill: #ffffff">';
// Look for <br> tags and split them onto new lines.
var this_lines = $(this).html().split('<br>');
for(var i=0;i<this_lines.length;i++){
this_text += '<tspan x="'+(t_offset.left - table_offset.left)+'" dy="'+$(this).css('font-size')+'">'+this_lines[i]+'</tspan>';
}
this_text += '</text>';
my_svg += this_text;
})
}
});
my_svg += '</svg>';
//Either append my_svg to a div or pass the code onto whatever else you need to do with it.
This is obviously rough but might get you started down the right track.
I found a project on github which automatically generates an HTML-like table from a JavaScript data structure: https://github.com/cocuh/SVG-Table
Since it does not rely on foreignObject, it's portability across browsers is much better.
Here is an example showing an SVG foreignobject which contains a tabular layout of nested SVG elements. It only works in Chrome though.
It includes an HTML table layout and a flexbox layout using div elements.
A jsfiddle is here.
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="shape">
<rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="inherit" />
<circle cx="50%" cy="50%" r="8" fill="yellow" />
</g>
</defs>
<foreignobject width="100%" height="50px" y="0">
<body xmlns="http://www.w3.org/1999/xhtml">
<table width="100%">
<tr>
<td colspan="3">
<div style="height:20px">
<svg>
<use xlink:href="#shape" fill="CornflowerBlue" />
</svg>
</div>
</td>
</tr>
<tr>
<td>
<div style="height:20px">
<svg>
<use xlink:href="#shape" fill="SlateBlue" />
</svg>
</div>
</td>
<td>
<div style="height:20px">
<svg>
<use xlink:href="#shape" fill="SlateBlue" />
</svg>
</div>
</td>
<td>
<div style="height:20px">
<svg>
<use xlink:href="#shape" fill="SlateBlue" />
</svg>
</div>
</td>
</tr>
</table>
</body>
</foreignobject>
<foreignobject width="100%" height="50px" y="60">
<body xmlns="http://www.w3.org/1999/xhtml">
<div style="display:flex;flex-direction:column">
<div>
<div style="height:20px;padding:2px">
<svg>
<use xlink:href="#shape" fill="orange" />
</svg>
</div>
</div>
<div style="display:flex;flex-direction:row;align-items:stretch">
<div style="width:33.333%;height:20px;padding:2px">
<svg>
<use xlink:href="#shape" fill="forestgreen" />
</svg>
</div>
<div style="width:33.333%;height:20px;padding:2px">
<svg>
<use xlink:href="#shape" fill="forestgreen" />
</svg>
</div>
<div style="width:33.333%;height:20px;padding:2px">
<svg>
<use xlink:href="#shape" fill="forestgreen" />
</svg>
</div>
</div>
</div>
</body>
</foreignobject>
</svg>
Necromancing.
The trouble is, when you need a table that can have an indefinite amount of rows and columns, with an unknown and variable row-height, as well as texts unknown at compile-time, that needs to resize to fit into a container, and which should neither be clipped nor overflow.
Fortunately, I've found the solution !
It requires setting the viewBox at runtime with JavaScript, though.
Works in Firefox and Chrome.
<?xml version="1.0" standalone="yes"?>
<html>
<head>
<title>Evacuation Plan</title>
<style type="text/css">
/*<![CDATA[*/
.A4
{
width: 21cm;
height: 29.7cm;
}
/*]]>*/
</style>
</head>
<body class="A4">
<div id="positionRoot" style="position: relative;">
<div id="sizerForTable" style="position: absolute; display: block; top: 2.5cm; left: 5cm; width: 2.5cm; height: 2.5cm; background-color: hotpink;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" preserveAspectRatio="xMinYMin meet" width="100%" height="100%" >
<rect id="rectBG" x="0" y="0" width="0" height="0" fill="#FF0000" />
<foreignObject id="foTableContainer" x="0" y="0" width="100%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<!--
<style type="text/css">
/*<![CDATA[*/
.testTableLayout
{
font-size: 5px;
line-height: 1em;
}
/*]]>*/
</style>
-->
<!-- also: Tabelle ausmessen - dies in Viewbox - dann verkleiners sich automatisch -->
<table id="tblTest" class="testTableLayout" style="border-collapse: collapse; border: none;" cellpadding="0" cellspacing="0">
<tr style="background-color: orange;">
<td>Row1</td>
<td>C1.2</td>
<td>Test<br />Me<br />More</td>
</tr>
<tr>
<td>Row2</td>
<td>C2.2</td>
<td>Test<!-- Me More--></td>
</tr>
<tr>
<td>Row3</td>
<td>C3.2</td>
<td>Test</td>
</tr>
<tr>
<td>Row4</td>
<td>C4.2</td>
<td>Test</td>
</tr>
<tr>
<td>Row5</td>
<td>C5.2</td>
<td>Test</td>
</tr>
<!--
-->
</table>
<script type="text/javascript">
//<![CDATA[
(function () {
var tbl = document.getElementById("tblTest");
var bg = document.getElementById("rectBG");
var nvb = ["0", "0", Math.ceil(tbl.offsetWidth).toString(), Math.ceil(tbl.offsetHeight).toString()];
bg.setAttribute("width", nvb[2]);
bg.setAttribute("height", nvb[3]);
document.getElementById("foTableContainer").ownerSVGElement.setAttribute("viewBox", nvb.join(" ") );
// console.log("newViewBox:", nvb);
// console.log("w,h:", tbl.offsetWidth, tbl.offsetHeight);
// console.log(document.getElementById("foTableContainer").ownerSVGElement.getAttribute("viewBox"));
})();
//]]>
</script>
</body>
</foreignObject>
</svg>
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论