Créer une table en SVG

Je suis en train de créer un tableau comme objet dans un document SVG. Actuellement, en raison du fait que le SVG n'est pas un élément de tableau, je suis en utilisant un analyseur HTML de passer et de convertir un tableau HTML, (créé par l'utilisateur dans un tableau HTML Builder), à un groupe de SVG objets, puis en ajoutant que pour l'ensemble de mon dessin SVG. Je me demandais si quelqu'un était en mesure de trouver une meilleure alternative à cette méthode, comme une SVG de table builder? Je suis à la recherche pour accomplir cela en utilisant Javascript ou jquery. Toutes les idées ou suggestions seraient appréciées.

InformationsquelleAutor Jlange | 2011-08-08
  1. 25

    Je voudrais simplement intégrer une vraie table dans mon fichier 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>
    • C'est effectivement une très bonne idée. Cependant, j'ai un problème que je ne peut pas utiliser un foreignobject élément. C'est difficile à expliquer, mais j'ai créé une coutume SVG, canvas, et j'ai besoin de la table pour être rendu à l'aide SVG pas en HTML (ou XHTML). Aussi, serait-ce causer des problèmes lors de l'utilisation de l'image svg? Si je définir le tableau en HTML, n'est-ce pas échouer à l'échelle correctement, car il n'est pas dans un format vectoriel?
    • Une autre variante de la présente est la superposition d'un élément svg sur une simple table, par exemple, si vous voulez juste pour tirer des flèches à travers les cellules. De cette façon, vous pouvez combiner svg avec une table sans l'aide de foreignobject. Mais la question d'origine est toujours un bon, et mon cas d'utilisation aujourd'hui, c'est que je veux apporter une table dans inkscape pour une utilisation dans un plus grand schéma.
    • ForeignObject soutien de chrome est vraiment fragile. Ses une honte. J'ai dû recourir à l'aide d'éléments svg natif de réaliser beaucoup de chose à cause de cela. Pour commencer il y a quelques bugs de rendu. Si vous faites glisser un objet étranger autour de lui laissera des ombres, qui disparaissent après le défilement des pages, mais sont une source de distraction pour le cœur. SVG transforme ne s'appliquent pas à des corps étrangers des éléments en chrome. ce n'est pas le cas avec firefox si.
    • Objet étranger n'est pas pris en charge par n'importe quel version de ie. Récemment rencontré le même problème. Regarde dans l'aide de groupe (g), texte et tspand une alternative.
    • foreignobject doivent être écrits en toutes foreignObject.
    • Je vous remercie. Je suis surpris de voir que le mauvais boîtier vécu dans cette réponse, pour près de 5 ans. 🙂

    InformationsquelleAutor Phrogz
  2. 15

    U peut utiliser de cette façon:

    Il n'existe pas de "table" les éléments de type en SVG, mais vous pouvez obtenir un visuel similaire et interactif effet à l'aide du 'texte' et 'tspan' éléments. Sur la gauche sont les 2 tableaux de représentations, le haut avec disposition en colonnes (qui est, l'utilisateur peut sélectionner tout le texte dans une colonne), et le bas de tableau avec une ligne de mise en page. Un inconvénient de cette approche est que vous ne pouvez pas créer un tableau à la fois verticale et horizontale de la sélectivité. A moins de défaut évident, c'est que la création d'un tableau de l'apparence, ne confère pas à la sémantique des qualités d'une vraie table, ce qui est désavantageux pour l'accessibilité et n'est pas propice à une riche interactivité et de la navigation

    Exemple:

    <?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

    • Je suis surpris que personne n'a écrit un JavaScript/D3 plug-in qui génère des tables à l'aide de svg.g des objets?
    • Une différence majeure entre un SVG tableau construit comme cela, vs un <table> construit en HTML, c'est que ce fichier SVG table est orientée colonne, tandis que la table HTML de ligne est orientée.
    • sur la page du lien, vous pouvez voir une ligne orientée variante.
    • Mozilla a une bonne référence pour la tspan élément est https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan.
    InformationsquelleAutor jacksonfdam
  3. 2

    Je voulais juste ajouter mes pensées sur ce pour la postérité. Il y a beaucoup de assez compliqué options là-bas, mais si vous voulez juste quelque chose qui semble comme une table, cela pourrait vous aider à démarrer...

    //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.

    C'est évidemment approximatif mais pourrait vous aider à démarrer sur la bonne voie.

    InformationsquelleAutor jperry1147
  4. 0

    Voici un exemple montrant une SVG foreignobject qui contient une disposition tabulaire d'imbrication des éléments SVG. Il ne fonctionne que sur Chrome si.

    Il comprend un HTML table mise en page et un flexbox mise en page à l'aide des éléments div.

    Un jsfiddle est ici.

    <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>

    InformationsquelleAutor Ed Evans
  5. 0

    J'ai trouvé un projet sur github, qui génère automatiquement un code HTML comme table à partir d'un JavaScript structure de données: https://github.com/cocuh/SVG-Table

    Car il ne repose pas sur foreignObject, c'est la portabilité entre les différents navigateurs est beaucoup mieux.

    InformationsquelleAutor John Zabroski