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、