webentwicklung-frage-antwort-db.com.de

Erstellen Sie eine Tabelle in SVG

Ich versuche, ein tabellenähnliches Objekt in einem SVG-Dokument zu erstellen. Aufgrund der Tatsache, dass SVG kein Tabellenelement enthält, verwende ich derzeit einen HTML-Parser, um eine HTML-Tabelle (die vom Benutzer in einem HTML-Tabellen-Generator erstellt wurde) in eine Gruppe von SVG-Objekten zu konvertieren dann füge ich das meiner gesamten SVG-Zeichnung hinzu. Ich habe mich gefragt, ob jemand eine bessere Alternative zu dieser Methode finden kann, wie zum Beispiel einen SVG-Tabellenersteller. Ich versuche dies mit Javascript oder JQuery zu erreichen. Irgendwelche Ideen oder Vorschläge würden geschätzt.

19
Jlange

Ich würde einfach eine echte Tabelle in mein SVG einbetten:

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

U kann folgendermaßen vorgehen:

In SVG gibt es keine Elemente vom Typ "Tabelle". Mit den Elementen "Text" und "Tspan" können Sie jedoch einen ähnlichen visuellen und interaktiven Effekt erzielen. Auf der linken Seite befinden sich 2 solche tabellarischen Darstellungen, die obere mit Spaltenlayout (dh der Benutzer kann den gesamten Text in einer Spalte auswählen) und die untere Tabelle mit zeilenbasiertem Layout. Ein offensichtlicher Nachteil dieses Ansatzes ist, dass Sie keine Tabelle mit vertikaler und horizontaler Selektivität erstellen können. Ein weniger offensichtlicher Fehler ist, dass das Erstellen eines tabellarischen Erscheinungsbilds nicht die semantischen Eigenschaften einer echten Tabelle verleiht, was für die Zugänglichkeit nachteilig und für eine umfassende Interaktivität und Navigation nicht günstig ist

Beispiel:

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

Quelle: http://svg-whiz.com/svg/table.svg

11
jacksonfdam

Ich wollte nur meine Gedanken dazu für die Nachwelt hinzufügen. Es gibt eine Menge ziemlich komplizierter Optionen, aber wenn Sie nur etwas wollen, das wie ein Tisch aussieht , können Sie damit anfangen ...

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

Dies ist offensichtlich rau, könnte Sie aber auf den richtigen Weg bringen.

2
jperry1147

Hier ist ein Beispiel, das ein SVG Fremdobjekt zeigt, das ein tabellarisches Layout verschachtelter SVG-Elemente enthält. Es funktioniert jedoch nur in Chrome.

Es enthält ein HTML table layout und ein flexbox layout mit div-Elementen.

Eine Jsfiddle ist hier .

<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>
1
Ed Evans

Auf github habe ich ein Projekt gefunden, das aus einer JavaScript-Datenstruktur automatisch eine HTML-ähnliche Tabelle generiert: https://github.com/cocuh/SVG-Table

Da es nicht auf foreignObject basiert, ist die Portabilität zwischen Browsern viel besser.

0
John Zabroski