SVG_text.文字高度_ZC去掉顶端部分

1、

2、上一篇文章中[ SVG_text.文字高度ascent&baseline&descent（资料及测试） - Html5Skill - 博客园.html（https://www.cnblogs.com/h5skill/p/9914834.html） ]，我求得的是文字整个的高度（即上面图中 ①②合起来的高度，getBBox()返回的是就是这个高度），现在我只想要 ②的高度

　　我的观察：（只是观察，未找到实际的文档规范之类的规定）

　　　（1）、<text/>的属性 “alignment-baseline”设置为 “hanging”时，“虚线B” 对齐文字的基本线(baseline) [ ZC：我的理解：就像文字是用钩子挂在baseline上面的一样 ]

　　　（2）、<text/>的属性 “alignment-baseline”设置为 “text-before-edge”时，“实线A” 对齐文字的基本线(baseline) [ ZC：此时的文字就全部是在baseline的下面了 ]

　　我的思路：

　　　（1）、“hanging”时，得到 BBox的Y值 y1

　　　（2）、“text-before-edge”时，得到 BBox的Y值 y2，

　　　（3）、y2 - y1 = ①的高度

　　　（4）、BBox的高度 - ①的高度 = ②的高度

3、测试代码：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="3000" height="1200" viewBox="0 0 3000 1200" xmlns="http://www.w3.org/2000/svg" >

    <!-- Materialisation of anchors -->
    <path d="M0,50 L800,50" stroke="grey" />

    <!-- Materialisation of anchors -->
    <circle cx="10" cy="50" r="3" fill="red" />

    <!-- Anchors in action -->
    <text id="textChange" alignment-baseline="text-before-edge" x="20" y="50">改变alignment-baseline属性，XML变化了，但是图形上Chrome[版本 70.0.3538.77(正式版本)(32 位)]肉眼没看到变化，Qt5.3.2x86OpenGL-WebKit有变化</text>
<!--
font-weight="bold" 
text-after-edge        ZC: 位于baseline的上面
baseline
text-before-edge    ZC: 位于baseline的下面
-->
    <rect id="rectChange" x="0" y="0" width="0" height="0" fill="none" stroke-width="1" stroke="green" />

<script type="text/javascript">
<![CDATA[
/*
// ZC: 这一段，用于 取得 属性“alignment-baseline”为“hang”和“text-before-edge”时 BBox的Y值 的数组内容
    window.onload = function()
    {
        var textChange = document.getElementById("textChange");
        var rtChange = textChange.getBBox();

    // *** font-size不设置，默认值是 "16px" (Chrome和Qt532都是)
        var strPrint = "";
        for (var i=1; i<=200; i++)
        {
            textChange.setAttribute("font-size", i+"px");
            rtChange = textChange.getBBox();
            //console.log("font-size:["+i+"px] --> rtChange.height : "+rtChange.height);

            //strPrint += rtChange.height+", ";
            strPrint += rtChange.y+", ";
            if (i % 8 == 0)
                strPrint += "\n";
            else
            {
                if (i % 4 == 0)
                    strPrint += "  ";
            }
        }
        console.log(strPrint);

        var rectChange = document.getElementById("rectChange");
        rectChange.setAttribute("x", ""+rtChange.x);
        rectChange.setAttribute("y", ""+rtChange.y);
        rectChange.setAttribute("width", ""+rtChange.width);
        rectChange.setAttribute("height", ""+rtChange.height);
    };
//*/

// ZC: 这一部分代码是 通过上面得到的 2个数组，得到 部分②的高度
    window.onload = function()
    {
        console.log("yHanging.length : "+yHanging.length);
        console.log("yBeforeEdge.length : "+yBeforeEdge.length);

        var strPrint = "";
        for (var i=1; i<=200; i++)
        {
            var dTop = (yBeforeEdge[i-1] - yHanging[i-1]);
            var dBottom = height_wk[i-1] - dTop;

            dBottom = dBottom.toFixed(0);// 这里是只保留整数部分 // 保留2位小数要这样写 dBottom.toFixed(2)
            //console.log( dBottom );

            strPrint += dBottom+", ";
            if (i % 8 == 0)
                strPrint += "\n";
            else
            {
                if (i % 4 == 0)
                    strPrint += "  ";
            }
        }
        console.log( strPrint );
    }

/* 
// 这里的 被注释掉的 yHanging 和 yBeforeEdge 和 height_chrome 是 “chrome 70.0.3538.102(正式版本)(32 位)”中的数据
    var yHanging = [59.390625, 58.390625, 57.390625, 56.390625,   55.390625, 54.390625, 53.390625, 52.390625, 
50.390625, 49.390625, 48.390625, 47.390625,   47.1875, 47, 46.796875, 46.59375, 
46.390625, 46.1875, 46, 45.796875,   45.59375, 45.390625, 45.1875, 45, 
44.796875, 44.390625, 44.1875, 44,   43.796875, 43.59375, 43.390625, 43.1875, 
43, 42.796875, 42.59375, 42.390625,   42.1875, 42, 41.796875, 41.59375, 
41.390625, 41.1875, 41, 40.59375,   40.390625, 40.1875, 40, 39.796875, 
39.59375, 39.390625, 39.1875, 39,   38.796875, 38.59375, 38.390625, 38.1875, 
38, 37.796875, 37.59375, 37.390625,   37, 36.796875, 36.59375, 36.390625, 
36.1875, 36, 35.796875, 35.59375,   35.390625, 35.1875, 35, 34.796875, 
34.59375, 34.390625, 34.1875, 34,   33.796875, 33.390625, 33.1875, 33, 
32.796875, 32.59375, 32.390625, 32.1875,   32, 31.796875, 31.59375, 31.390625, 
31.1875, 31, 30.796875, 30.59375,   30.390625, 30.1875, 29.796875, 29.59375, 
29.390625, 29.1875, 29, 28.796875,   28.59375, 28.390625, 28.1875, 28, 
27.796875, 27.59375, 27.390625, 27.1875,   27, 26.796875, 26.59375, 26.1875, 
26, 25.796875, 25.59375, 25.390625,   25.1875, 25, 24.796875, 24.59375, 
24.390625, 24.1875, 24, 23.796875,   23.59375, 23.390625, 23.1875, 23, 
22.796875, 22.390625, 22.1875, 22,   21.796875, 21.59375, 21.390625, 21.1875, 
21, 20.796875, 20.59375, 20.390625,   20.1875, 20, 19.796875, 19.59375, 
19.390625, 19.1875, 18.796875, 18.59375,   18.390625, 18.1875, 18, 17.796875, 
17.59375, 17.390625, 17.1875, 17,   16.796875, 16.59375, 16.390625, 16.1875, 
16, 15.796875, 15.59375, 15.1875,   15, 14.796875, 14.59375, 14.390625, 
14.1875, 14, 13.796875, 13.59375,   13.390625, 13.1875, 13, 12.796875, 
12.59375, 12.390625, 12.1875, 12,   11.59375, 11.390625, 11.1875, 11, 
10.796875, 10.59375, 10.390625, 10.1875,   10, 9.796875, 9.59375, 9.390625, 
9.1875, 9, 8.796875, 8.59375,   8.390625, 8, 7.796875, 7.59375];


var yBeforeEdge = [62, 61, 60, 59,   58, 57, 56, 55, 
53, 52, 51, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50];

var height_chrome = [2, 3, 4, 5,   7, 8, 9, 10, 
12, 14, 15, 16,   17, 19, 20, 21, 
22, 24, 25, 26,   27, 29, 30, 31, 
33, 35, 36, 37,   39, 40, 41, 42, 
44, 45, 46, 47,   49, 50, 51, 52, 
54, 55, 56, 59,   60, 61, 62, 64, 
65, 66, 67, 69,   70, 71, 72, 74, 
75, 76, 78, 79,   81, 82, 84, 85, 
86, 87, 89, 90,   91, 92, 94, 95, 
96, 97, 99, 100,   101, 103, 105, 106, 
107, 108, 110, 111,   112, 114, 115, 116, 
117, 119, 120, 121,   122, 124, 126, 127, 
128, 130, 131, 132,   133, 135, 136, 137, 
138, 140, 141, 142,   144, 145, 146, 148, 
150, 151, 152, 153,   155, 156, 157, 158, 
160, 161, 162, 163,   165, 166, 167, 169, 
170, 172, 173, 175,   176, 177, 178, 180, 
181, 182, 183, 185,   186, 187, 188, 190, 
191, 192, 194, 196,   197, 198, 200, 201, 
202, 203, 205, 206,   207, 208, 210, 211, 
212, 213, 215, 217,   218, 219, 221, 222, 
223, 224, 226, 227,   228, 230, 231, 232, 
233, 235, 236, 237,   239, 241, 242, 243, 
244, 246, 247, 248,   249, 251, 252, 253, 
255, 256, 257, 258,   260, 262, 263, 264];
*/



// 下面的是 Qt532OpenGL(msvc2010)x86 的 WebKit的数据
var yHanging = [
49.59375, 49.59375, 49.390625, 49.1875,   49.1875, 49, 48.796875, 48.390625, 
48, 48, 47.796875, 47.59375,   47.59375, 47.390625, 47.390625, 47, 
47, 46.796875, 46.796875, 46.59375,   46.390625, 46, 46, 45.796875, 
45.390625, 45.390625, 45.1875, 44.796875,   44.796875, 44.59375, 44.390625, 44.390625, 
44.1875, 43.796875, 43.59375, 43.59375,   43.390625, 43.1875, 43.1875, 42.796875, 
42.59375, 42.390625, 42.1875, 42,   41.796875, 41.59375, 41.59375, 41.390625, 
41.1875, 41, 41, 40.59375,   40.390625, 40.390625, 40.1875, 40, 
39.796875, 39.390625, 39.390625, 39.1875,   39.1875, 39, 38.796875, 38.390625, 
38.390625, 38.1875, 38, 37.796875,   37.796875, 37.390625, 37.1875, 37.1875, 
37, 36.796875, 36.59375, 36.390625,   36.1875, 36, 35.796875, 35.796875, 
35.59375, 35.1875, 35.1875, 35,   34.796875, 34.59375, 34.59375, 34.1875, 
34, 33.796875, 33.796875, 33.59375,   33.390625, 33.1875, 33, 32.796875, 
32.59375, 32.59375, 32.390625, 32,   31.796875, 31.796875, 31.59375, 31.390625, 
31.390625, 31, 30.796875, 30.59375,   30.59375, 30.390625, 30.1875, 30, 
29.796875, 29.59375, 29.390625, 29.390625,   29.1875, 29, 28.59375, 28.59375, 
28.390625, 28.1875, 28, 28,   27.59375, 27.390625, 27.390625, 27.1875, 
27, 26.796875, 26.59375, 26.390625,   26.1875, 26, 26, 25.796875, 
25.390625, 25.390625, 25.1875, 25,   24.796875, 24.796875, 24.390625, 24.1875, 
24, 24, 23.796875, 23.59375,   23.390625, 23.1875, 23, 22.796875, 
22.796875, 22.59375, 22.1875, 22,   22, 21.796875, 21.59375, 21.59375, 
21.1875, 21, 20.796875, 20.796875,   20.59375, 20.390625, 20, 20, 
19.796875, 19.59375, 19.390625, 19.390625,   19, 18.796875, 18.796875, 18.59375, 
18.390625, 18.1875, 18, 17.796875,   17.59375, 17.390625, 17.390625, 17.1875, 
16.796875, 16.796875, 16.59375, 16.390625,   16.1875, 16.1875, 15.796875, 15.59375, 
15.390625, 15.390625, 15.1875, 14.796875,   14.796875, 14.59375, 14.1875, 14];

var yBeforeEdge = [50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50, 
50, 50, 50, 50,   50, 50, 50, 50];


var height_wk = [2, 2, 4, 5,   5, 6, 8, 10, 
12, 12, 14, 15,   15, 16, 17, 19, 
19, 20, 21, 22,   23, 25, 26, 27, 
29, 29, 31, 33,   33, 34, 35, 36, 
37, 39, 40, 41,   42, 43, 43, 46, 
47, 48, 49, 51,   52, 53, 53, 55, 
56, 57, 57, 60,   61, 61, 62, 64, 
65, 67, 67, 68,   69, 70, 71, 73, 
74, 75, 76, 77,   78, 80, 81, 81, 
83, 84, 85, 86,   88, 89, 90, 90, 
92, 94, 94, 95,   97, 98, 98, 100, 
101, 103, 103, 104,   105, 107, 108, 109, 
110, 111, 112, 114,   115, 116, 117, 118, 
118, 121, 122, 123,   123, 125, 126, 127, 
128, 130, 131, 131,   132, 133, 136, 136, 
137, 138, 140, 140,   142, 143, 144, 145, 
146, 147, 149, 150,   151, 152, 153, 154, 
156, 156, 158, 159,   160, 160, 163, 164, 
165, 165, 166, 168,   169, 170, 169, 171, 
171, 172, 174, 176,   176, 177, 178, 179, 
181, 182, 183, 184,   185, 186, 188, 189, 
190, 191, 191, 191,   194, 195, 195, 196, 
198, 199, 200, 201,   203, 204, 204, 205, 
208, 208, 209, 210,   212, 212, 214, 215, 
217, 217, 218, 220,   221, 222, 224, 225];

]]>
</script>
</svg>

4、得到的数据

　　4.1、Qt532OpenGL(MSVC2010)x86 的WebKit的数据　（4舍5入保留2位小数）

1.59, 1.59, 3.39, 4.19,   4.19, 5.00, 6.80, 8.39, 
10.00, 10.00, 11.80, 12.59,   12.59, 13.39, 14.39, 16.00, 
16.00, 16.80, 17.80, 18.59,   19.39, 21.00, 22.00, 22.80, 
24.39, 24.39, 26.19, 27.80,   27.80, 28.59, 29.39, 30.39, 
31.19, 32.80, 33.59, 34.59,   35.39, 36.19, 36.19, 38.80, 
39.59, 40.39, 41.19, 43.00,   43.80, 44.59, 44.59, 46.39, 
47.19, 48.00, 48.00, 50.59,   51.39, 51.39, 52.19, 54.00, 
54.80, 56.39, 56.39, 57.19,   58.19, 59.00, 59.80, 61.39, 
62.39, 63.19, 64.00, 64.80,   65.80, 67.39, 68.19, 68.19, 
70.00, 70.80, 71.59, 72.39,   74.19, 75.00, 75.80, 75.80, 
77.59, 79.19, 79.19, 80.00,   81.80, 82.59, 82.59, 84.19, 
85.00, 86.80, 86.80, 87.59,   88.39, 90.19, 91.00, 91.80, 
92.59, 93.59, 94.39, 96.00,   96.80, 97.80, 98.59, 99.39, 
99.39, 102.00, 102.80, 103.59,   103.59, 105.39, 106.19, 107.00, 
107.80, 109.59, 110.39, 110.39,   111.19, 112.00, 114.59, 114.59, 
115.39, 116.19, 118.00, 118.00,   119.59, 120.39, 121.39, 122.19, 
123.00, 123.80, 125.59, 126.39,   127.19, 128.00, 129.00, 129.80, 
131.39, 131.39, 133.19, 134.00,   134.80, 134.80, 137.39, 138.19, 
139.00, 139.00, 139.80, 141.59,   142.39, 143.19, 142.00, 143.80, 
143.80, 144.59, 146.19, 148.00,   148.00, 148.80, 149.59, 150.59, 
152.19, 153.00, 153.80, 154.80,   155.59, 156.39, 158.00, 159.00, 
159.80, 160.59, 160.39, 160.39,   163.00, 163.80, 163.80, 164.59, 
166.39, 167.19, 168.00, 168.80,   170.59, 171.39, 171.39, 172.19, 
174.80, 174.80, 175.59, 176.39,   178.19, 178.19, 179.80, 180.59, 
182.39, 182.39, 183.19, 184.80,   185.80, 186.59, 188.19, 189.00,

　　4.2、Qt532OpenGL(MSVC2010)x86 的WebKit的数据　（4舍5入只保留整数）

2, 2, 3, 4,   4, 5, 7, 8, 
10, 10, 12, 13,   13, 13, 14, 16, 
16, 17, 18, 19,   19, 21, 22, 23, 
24, 24, 26, 28,   28, 29, 29, 30, 
31, 33, 34, 35,   35, 36, 36, 39, 
40, 40, 41, 43,   44, 45, 45, 46, 
47, 48, 48, 51,   51, 51, 52, 54, 
55, 56, 56, 57,   58, 59, 60, 61, 
62, 63, 64, 65,   66, 67, 68, 68, 
70, 71, 72, 72,   74, 75, 76, 76, 
78, 79, 79, 80,   82, 83, 83, 84, 
85, 87, 87, 88,   88, 90, 91, 92, 
93, 94, 94, 96,   97, 98, 99, 99, 
99, 102, 103, 104,   104, 105, 106, 107, 
108, 110, 110, 110,   111, 112, 115, 115, 
115, 116, 118, 118,   120, 120, 121, 122, 
123, 124, 126, 126,   127, 128, 129, 130, 
131, 131, 133, 134,   135, 135, 137, 138, 
139, 139, 140, 142,   142, 143, 142, 144, 
144, 145, 146, 148,   148, 149, 150, 151, 
152, 153, 154, 155,   156, 156, 158, 159, 
160, 161, 160, 160,   163, 164, 164, 165, 
166, 167, 168, 169,   171, 171, 171, 172, 
175, 175, 176, 176,   178, 178, 180, 181, 
182, 182, 183, 185,   186, 187, 188, 189,

5、

SVG_text.文字高度_ZC去掉顶端部分

推荐阅读