原文鏈接：https://www.cnblogs.com/h5skill/p/9914834.html

SVG_text.文字高度ascent&baseline&descent（資料及測試）

ZC：文字的高度的測試在文章的後半部分

1、html5 svg 第八章文字text - 2030的專欄 - CSDN博客.html（https://blog.csdn.net/lcy132100/article/details/9722543）

2、baseline-shift - SVG _ MDN.html（https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/baseline-shift）

　　ZC：baseline-shift 文字的上標和下標

3、ascent - SVG_ Scalable Vector Graphics _ MDN.html（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/ascent）

　　ZC：本來想通過類似ascent屬性來獲取 ascent / descent的值，但是貌似只有 <font-face>節點有這個屬性（這個是用於自定義字體的）

4、alignment-baseline - SVG_ Scalable Vector Graphics _ MDN.html（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline）

　　ZC：發現了這個屬性，可以控制文字在基線的上面/下面來顯示

5、ZC：還發現了一個信息：getBBox() 獲取的矩形框，是從包含 ascent和descent 的整個的高度

　　ZC：有了這個信息和 4 裏面的位置，就可以比較簡單的計算控制 <text/> 的位置和換行等了

6、alignment-baseline 效果，各個瀏覽器可能表現不一：

　　圖上信息，左側爲 Chrome[版本 70.0.3538.77(正式版本)(32 位)] 的現象，右側爲 Qt5.3.2x86OpenGL-WebKit 的現象，

　　　　ZC：測試肉眼看起來，文字粗體（font-weight="bold" ），不影響其 getBBox()

　6.1、SVG文件爲：（文件爲 UTF8編碼）

<?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="M30,65 L800,65" stroke="grey" />

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

    <!-- Anchors in action -->
    <text id="textUp" alignment-baseline="text-after-edge" x="60" y="65">A text-after-edge</text>
    <text id="textOn" alignment-baseline="baseline" x="200" y="65">A baseline</text>
    <text id="textDown" alignment-baseline="text-before-edge" x="285" y="65">A text-before-edge</text>

    <text id="textChange" alignment-baseline="text-before-edge" x="450" y="65">改變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="rectUp"   x="0" y="0" width="0" height="0" fill="none" stroke-width="1" stroke="red" />
    <rect id="rectOn"   x="0" y="0" width="0" height="0" fill="none" stroke-width="1" stroke="yellow" />
    <rect id="rectDown" x="0" y="0" width="0" height="0" fill="none" stroke-width="1" stroke="blue" />
    <rect id="rectChange" x="0" y="0" width="0" height="0" fill="none" stroke-width="1" stroke="green" />

<script type="text/javascript">
<![CDATA[
    window.onload = function()
    {
        var rectUp = document.getElementById("rectUp");
        var rectOn = document.getElementById("rectOn");
        var rectDown = document.getElementById("rectDown");

        var textUp = document.getElementById("textUp");
        var textOn = document.getElementById("textOn");
        var textDown = document.getElementById("textDown");

        var rtUp = textUp.getBBox();
        var rtOn = textOn.getBBox();
        var rtDown = textDown.getBBox();

        rectUp.setAttribute("x", ""+rtUp.x);
        rectUp.setAttribute("y", ""+rtUp.y);
        rectUp.setAttribute("width", ""+rtUp.width);
        rectUp.setAttribute("height", ""+rtUp.height);

        rectOn.setAttribute("x", ""+rtOn.x);
        rectOn.setAttribute("y", ""+rtOn.y);
        rectOn.setAttribute("width", ""+rtOn.width);
        rectOn.setAttribute("height", ""+rtOn.height);

        rectDown.setAttribute("x", ""+rtDown.x);
        rectDown.setAttribute("y", ""+rtDown.y);
        rectDown.setAttribute("width", ""+rtDown.width);
        rectDown.setAttribute("height", ""+rtDown.height);

    // ***
        var textChange = document.getElementById("textChange");
        textChange.removeAttribute("alignment-baseline");

    // ***
        textChange.setAttribute("alignment-baseline", "text-before-edge");
        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+", ";
            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);
    /*
        for (z in textChange)
            console.log(z+" : "+textChange[z]);

        console.log("");
        console.log("");
        console.log("");

        var cs = window.getComputedStyle(textChange);
        for (var i=0; i<cs.length; i++)
        {
            var name = cs[i];
            var value = cs.getPropertyValue(name);
            console.log(name +" --> "+value);
            if (name.toLowerCase() == "alignment-baseline")
                console.log("*****************************************************************************************************************************");
        }
    //*/
    };

]]>
</script>
</svg>

　6.2、上面代碼中，測試了文字的屬性font-size從1px到200px 文字節點的高度，這裏記錄下信息：

　　ZC：瀏覽器間還是有差異的，儘管都是出自 WebKit（貌似現在 Chrome不是WebKit了？）

　　（1）、Chrome[版本 70.0.3538.77(正式版本)(32 位)]

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,

　　（2）、Qt5.3.2x86OpenGL-WebKit

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,

7、

8、

9、

10、

SVG中的text文字高度ascent&baseline&descent（資料及測試）

SVG_text.文字高度ascent&baseline&descent（資料及測試）

物理機開關機

實現使用C++/WIN32進行DNS域名解析工具

使用bat腳本讀取ini配置文件

使用Qt通過HTTP請求數據（post和get）

使用js將utf16格式編碼的數據和utf8格式的數據互轉

CEF3 C++接口實現自定義瀏覽器[simple version]

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結