svg: table style

 

<!--Scalable Vector Graphic-->
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"  
     width="960px" 
     height="560px" 
     viewBox="0 0 960px 560px">
   <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>

　　

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>svg table </title>
	<style type="text/css">
        /*<![CDATA[*/
            
            .A4 
            { 
                width: 21cm; 
                height: 29.7cm;
            } 
            
        /*]]>*/
        </style>
</head>

<body>
 <div id="positionRoot" style="position: relative;">
        
        <div id="sizerForTable" style="position: absolute; display: block; top: 2.5cm; left: 5cm; width: 2.5cm; height: 2.5cm; background-color: hotpink;">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" preserveAspectRatio="xMinYMin meet" width="100%" height="100%" >
              
              <rect id="rectBG" x="0" y="0" width="0" height="0" fill="#FF0000" />
              <foreignObject id="foTableContainer" x="0" y="0" width="100%" height="100%">
                <body xmlns="http://www.w3.org/1999/xhtml">
                  
                  <!--
                  <style type="text/css">
                  /*<![CDATA[*/
                        
                        .testTableLayout 
                        { 
                            font-size: 5px; 
                            line-height: 1em; 
                        } 
                        
                  /*]]>*/
                  </style>
                  -->
                  
                  <!-- also: Tabelle ausmessen - dies in Viewbox - dann verkleiners sich automatisch -->
                  
                  <table id="tblTest" class="testTableLayout" style="border-collapse: collapse; border: none;" cellpadding="0" cellspacing="0">
                    <tr style="background-color: orange;">
                        <td>Row1</td>
                        <td>C1.2</td>
                        <td>Test<br />Me<br />More</td>
                    </tr>
                    <tr>
                        <td>Row2</td>
                        <td>C2.2</td>
                        <td>Test<!-- Me More--></td>
                    </tr>
                    <tr>
                        <td>Row3</td>
                        <td>C3.2</td>
                        <td>Test</td>
                    </tr>
                    
                    <tr>
                        <td>Row4</td>
                        <td>C4.2</td>
                        <td>Test</td>
                    </tr>
                    <tr>
                        <td>Row5</td>
                        <td>C5.2</td>
                        <td>Test</td>
                    </tr>
                    <!--
                    -->
                    
                  </table>
                  
                  <script type="text/javascript">
                    //<![CDATA[
                    
                    (function () {
                        
                        var tbl = document.getElementById("tblTest"); 
                        var bg = document.getElementById("rectBG"); 
                        var nvb = ["0", "0", Math.ceil(tbl.offsetWidth).toString(), Math.ceil(tbl.offsetHeight).toString()]; 
                        
                        bg.setAttribute("width", nvb[2]); 
                        bg.setAttribute("height", nvb[3]); 
                        document.getElementById("foTableContainer").ownerSVGElement.setAttribute("viewBox", nvb.join(" ") ); 
                        
                        // console.log("newViewBox:", nvb); 
                        // console.log("w,h:", tbl.offsetWidth, tbl.offsetHeight); 
                        // console.log(document.getElementById("foTableContainer").ownerSVGElement.getAttribute("viewBox")); 
                    })();
                    
                    //]]>
                  </script>
                  
                </body>
              </foreignObject>
            </svg>
        </div>
        </div>
</body>
</html>

　　


https://stackoverflow.com/questions/6987005/create-a-table-in-svg/6996853#6996853
https://topherrhodes.com/svg-table/
https://github.com/cocuh/SVG-Table

posted @ 2024-01-22 18:04  ®Geovin Du Dream Park™  阅读(42)  评论(0)    收藏  举报