Create a table in SVG

后端 未结 5 571
甜味超标
甜味超标 2020-12-03 01:11

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

5条回答
  •  执念已碎
    2020-12-03 02:03

    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:

    
    
    
    
       SVG Table
    
       
          
          
    
          
             Q1
             Q2
             Q3
             Q4
          
    
          
             Sales
             $ 223
             $ 183
             $ 277
             $ 402
          
    
          
             Expenses
             $ 195
             $ 70
             $ 88
             $ 133
          
    
          
             Net
             $ 28
             $ 113
             $ 189
             $ 269
          
       
    
    

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

提交回复
热议问题