Crear una tabla en SVG

Esta es el arreglo más acertada que te podemos aportar, pero primero estúdiala detenidamente y valora si se puede adaptar a tu proyecto.

Solución:

Simplemente incrustaría una tabla real en mi SVG:

Puedes usar de esta manera:

No hay elementos de tipo ‘tabla’ en SVG, pero puede lograr un efecto visual e interactivo similar utilizando los elementos ‘texto’ y ‘tspan’. A la izquierda hay 2 representaciones tabulares de este tipo, la superior con diseño en columnas (es decir, el usuario puede seleccionar todo el texto en una columna) y la tabla inferior con diseño basado en filas. Una desventaja obvia de este enfoque es que no puede crear una tabla con selectividad tanto vertical como horizontal. Un defecto menos obvio es que la creación de una apariencia tabular no confiere las cualidades semánticas de una tabla real, lo que es una desventaja para la accesibilidad y no conduce a una rica interactividad y navegación.

Ejemplo:

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

Solo quería agregar mis pensamientos sobre esto para la posteridad. Hay muchas opciones bastante complicadas, pero si solo quieres algo que mira como una mesa, esto podría ayudarte a empezar…

//assuming you have a table with an ID of src_table
var my_svg = '
 tag. If it's not, just use the .html() of the  element
       (this).children('p').each(function()
                t_offset = $(this).offset();
                var this_text = '';
                    // Look for 
 tags and split them onto new lines.
                    var this_lines = $(this).html().split('
');
                    for(var i=0;i'+this_lines[i]+'';
                    
            this_text += '';
            my_svg +=  this_text;
        )
    
});
my_svg += '';

//Either append my_svg to a div or pass the code onto whatever else you need to do with it.

Obviamente, esto es difícil, pero podría ayudarlo a comenzar por el camino correcto.

No se te olvide compartir este escrito si si solucionó tu problema.

---

---

Utiliza Nuestro Buscador