Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>U can use this way:</strong></p> <p>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</p> <p>Example:</p> <pre><code>&lt;?xml version='1.0' standalone='no'?&gt; &lt;!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'&gt; &lt;svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'&gt; &lt;title&gt;SVG Table&lt;/title&gt; &lt;g id='columnGroup'&gt; &lt;rect x='65' y='10' width='75' height='110' fill='gainsboro'/&gt; &lt;rect x='265' y='10' width='75' height='110' fill='gainsboro'/&gt; &lt;text x='30' y='30' font-size='18px' font-weight='bold' fill='crimson'&gt; &lt;tspan x='30' dy='1.5em'&gt;Q1&lt;/tspan&gt; &lt;tspan x='30' dy='1em'&gt;Q2&lt;/tspan&gt; &lt;tspan x='30' dy='1em'&gt;Q3&lt;/tspan&gt; &lt;tspan x='30' dy='1em'&gt;Q4&lt;/tspan&gt; &lt;/text&gt; &lt;text x='100' y='30' font-size='18px' text-anchor='middle'&gt; &lt;tspan x='100' font-weight='bold' fill='crimson'&gt;Sales&lt;/tspan&gt; &lt;tspan x='100' dy='1.5em'&gt;$ 223&lt;/tspan&gt; &lt;tspan x='100' dy='1em'&gt;$ 183&lt;/tspan&gt; &lt;tspan x='100' dy='1em'&gt;$ 277&lt;/tspan&gt; &lt;tspan x='100' dy='1em'&gt;$ 402&lt;/tspan&gt; &lt;/text&gt; &lt;text x='200' y='30' font-size='18px' text-anchor='middle'&gt; &lt;tspan x='200' font-weight='bold' fill='crimson'&gt;Expenses&lt;/tspan&gt; &lt;tspan x='200' dy='1.5em'&gt;$ 195&lt;/tspan&gt; &lt;tspan x='200' dy='1em'&gt;$ 70&lt;/tspan&gt; &lt;tspan x='200' dy='1em'&gt;$ 88&lt;/tspan&gt; &lt;tspan x='200' dy='1em'&gt;$ 133&lt;/tspan&gt; &lt;/text&gt; &lt;text x='300' y='30' font-size='18px' text-anchor='middle'&gt; &lt;tspan x='300' font-weight='bold' fill='crimson'&gt;Net&lt;/tspan&gt; &lt;tspan x='300' dy='1.5em'&gt;$ 28&lt;/tspan&gt; &lt;tspan x='300' dy='1em'&gt;$ 113&lt;/tspan&gt; &lt;tspan x='300' dy='1em'&gt;$ 189&lt;/tspan&gt; &lt;tspan x='300' dy='1em'&gt;$ 269&lt;/tspan&gt; &lt;/text&gt; &lt;/g&gt; &lt;/svg&gt; </code></pre> <p>Source: <a href="http://svg-whiz.com/svg/table.svg">http://svg-whiz.com/svg/table.svg</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload