svg: table style

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!--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>

　　

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!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 @   ®Geovin Du Dream Park™  阅读(12)  评论(0)  编辑  收藏  举报
相关博文：
·  SVG: SVG Path
·  SVG: draw text on a image
·  SVG学习小案例
·  字帖生成器
·  Element样式参考
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2022-01-22 java: create pdf password using itextpdf 5.x and bouncycastle Library
2019-01-22 vis.js 4.21.0 Timeline localization
2018-01-22 Python3.4:splinter or traceback
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示