SVG_text.动态创建换行显示（横）

1、我的测试代码

　　1.1、

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="800" viewBox="-500 -200 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/svg"><script type="text/javascript" ><![CDATA[<!--var g_iTextSpanIdx = 0;function TextWordwrap_Horizontal(_eleText, _eleText_hidden, _iWidth, _strNS, _strText){if (_strText.length <= 0)reeturn;g_iTextSpanIdx = 0;_eleText.innerHTML = "";// ZC: 还要将 _eleText_hidden的属性设置成和_eleText的属性 一样的 (font-size / font-family 等)
_eleText_hidden.innerHTML = "";var nodeText_hidden = document.createTextNode(_strText[0]);_eleText_hidden.appendChild(nodeText_hidden);var iFirstSpanHeight = 0;// ZC: _eleText中第一行<span/>的高度var iPrevSpanWidth = 0;// ZC: _eleText中上一行<span/>的宽度if (_strText.length > 1){var iCntPrev = 0;var eleTspan = null;var nodeText = null;for (var i=1; i<_strText.length; i++){var iWidthPrev = _eleText_hidden.getComputedTextLength();iCntPrev = _eleText_hidden.firstChild.data.length;_eleText_hidden.firstChild.data += _strText[i];if (_eleText_hidden.getComputedTextLength() > _iWidth){console.log("i : " + i);console.log("iWidthPrev : " + iWidthPrev + " , " + _eleText_hidden.getComputedTextLength());console.log("iCntPrev : " + iCntPrev);_eleText_hidden.firstChild.data = _eleText_hidden.firstChild.data.slice(0, iCntPrev);eleTspan = document.createElementNS(_strNS, "tspan");_eleText.appendChild(eleTspan);nodeText = document.createTextNode(_eleText_hidden.firstChild.data);eleTspan.appendChild(nodeText);if (g_iTextSpanIdx == 0){var rt = _eleText.getBBox();iFirstSpanHeight = rt.height;console.log("iFirstSpanHeight : " + iFirstSpanHeight);}else{eleTspan.setAttribute("dx", (-iPrevSpanWidth) + "");eleTspan.setAttribute("dy", (iFirstSpanHeight) + "");console.log("dx : " + (-iPrevSpanWidth) + " , " + g_iTextSpanIdx);console.log("dy : " + (iFirstSpanHeight));}_eleText_hidden.firstChild.data = _strText[i];iPrevSpanWidth = iWidthPrev;g_iTextSpanIdx ++;console.log("");}// if
            }// forif (iCntPrev > 0){eleTspan = document.createElementNS(_strNS, "tspan");_eleText.appendChild(eleTspan);nodeText = document.createTextNode(_eleText_hidden.firstChild.data);eleTspan.appendChild(nodeText);eleTspan.setAttribute("dx", (-iPrevSpanWidth) + "");eleTspan.setAttribute("dy", (iFirstSpanHeight) + "");}}// if
    }window.onload = function(evt){var strTextContent = "中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。";//    var strTextContent = "中文测试text内";var eleSvg = document.getElementsByTagName("svg")[0];var strNS = eleSvg.getAttribute("xmlns");var eleText = document.createElementNS(strNS, "text");eleSvg.appendChild(eleText);eleText.setAttribute("x", "-400");eleText.setAttribute("y", "0");var textCalcLength = document.getElementById("textCalcLength");TextWordwrap_Horizontal(eleText, textCalcLength, 200, strNS, strTextContent);//TextWordwrap_Horizontal(eleText, 100);
        };-->]]></script><rect x="-400" y="-30" width="200" height="1" stroke="none" fill="blue"/><!--  visibility="hidden" -->
<text id="textCalcLength" visibility="hidden" /></svg>
<?DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"?>

2、网上搜索到的方案的源码：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="800" viewBox="-500 -200 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/svg"><script type="text/javascript" ><![CDATA[<!--var width = 200;function init(evt){if ( window.svgDocument == null ){svgDocument = evt.target.ownerDocument;}create_multiline("Whatever text you want here.");}function create_multiline(text){var words = text.split(' ');                        var text_element = svgDocument.getElementById('multiline-text');var tspan_element = document.createElementNS(svgNS, "tspan");   // Create first tspan elementvar text_node = svgDocument.createTextNode(words[0]);           // Create text in tspan element
tspan_element.appendChild(text_node);                           // Add tspan element to DOM
        text_element.appendChild(tspan_element);                        // Add text to tspan elementfor(var i=1; i<words.length; i++){var len = tspan_element.firstChild.data.length;             // Find number of letters in string
            tspan_element.firstChild.data += " " + words[i];            // Add next wordif (tspan_element.getComputedTextLength() > width){tspan_element.firstChild.data = tspan_element.firstChild.data.slice(0, len);    // Remove added wordvar tspan_element = document.createElementNS(svgNS, "tspan");       // Create new tspan element
                tspan_element.setAttributeNS(null, "x", 10);tspan_element.setAttributeNS(null, "dy", 18);text_node = svgDocument.createTextNode(words[i]);tspan_element.appendChild(text_node);text_element.appendChild(tspan_element);}}}window.onload = function(evt){svgNS = "http://www.w3.org/2000/svg";//svgDocument = document.documentElement;// 这个就是 <svg/>节点
        svgDocument = document;create_multiline("Whatever text you want here.1234567890.1234567890");var text01 = document.getElementById("text01");var rt = text01.getBBox();console.log(rt.x+", "+rt.y+", "+rt.width+", "+rt.height+" - "+text01.tagName);var text0101 = document.getElementById("text0101");rt = text0101.getBBox();console.log(rt.x+", "+rt.y+", "+rt.width+", "+rt.height+" - "+text0101.tagName);var text0102 = document.getElementById("text0102");rt = text0102.getBBox();console.log(rt.x+", "+rt.y+", "+rt.width+", "+rt.height+" - "+text0102.tagName);};-->]]></script><text x="10" y="50" id="multiline-text"> </text>
<rect x="10" y="30" width="200" height="1" fill="none" stroke="red"/><text x="-100" y="200" id="text01" ><tspan id="text0101">Whatever text you want</tspan><tspan id="text0102" dx="0" dy="21">here. 1234567890.1234567890</tspan>
</text></svg>
<?DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"?>

3、根据上面 “2、网上搜索到的方案的源码” 修改的适合我需要的方案的源码

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="800" viewBox="-500 -200 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/svg"><script type="text/javascript" ><![CDATA[<!--// ZC: _eleText里面必须是未分过行的内容，不然 计算位置会出错function TextWordwrap_Horizontal(_eleText, _iWidth){// ZC: 直接获取<text/>的文本内容 （innerText）//var str = _eleText.innerText;var str = _eleText.firstChild.data;if (str.length <= 0)return;_eleText.innerHTML = "";var eleSvg = document.getElementsByTagName("svg")[0];var strNS = eleSvg.getAttribute("xmlns");var eleTspan = document.createElementNS(strNS, "tspan");_eleText.appendChild(eleTspan);var nodeText = document.createTextNode(str[0]);eleTspan.appendChild(nodeText);var rtText = _eleText.getBBox();console.log("_eleText.getBBox() : " + rtText.x + ", " + rtText.y + ", " + rtText.width + ", " + rtText.height);var iRowCnt = 0;if (str.length > 1){for(var i=1; i<str.length; i++){var rtShort = eleTspan.getBBox();console.log("rtShort.width : "+ rtShort.width);var iLen = eleTspan.firstChild.data.length;console.log("iLen : " + iLen);eleTspan.firstChild.data += str[i];    var rtLong = eleTspan.getBBox();console.log("rtLong.width : "+ rtLong.width);if (rtLong.width > _iWidth){iRowCnt ++;eleTspan.firstChild.data = eleTspan.firstChild.data.slice(0, iLen);eleTspan = document.createElementNS(strNS, "tspan");_eleText.appendChild(eleTspan);nodeText = document.createTextNode(str[i]);eleTspan.appendChild(nodeText);var rtTspan = eleTspan.getBBox();// ZC: 这里计算 dx(x轴的偏移)时，由于本tspan的偏移位置是相对于上一个tspan而言的，又∵每次的上一个tspan的宽度不一定一样，// ZC:    如果 偏移了之后 比 <text/>的x还小的话，就会导致 整个<text/>的宽度变大，就会出现 本文件执行时出现的不对的现象
                    eleTspan.setAttribute("dx", (-rtShort.width) + "");console.log("(-rtShort.width) : "+ (-rtShort.width));eleTspan.setAttribute("dy", (rtText.height * iRowCnt) + "");console.log("(rtText.height*iRowCnt) : "+ (rtText.height*iRowCnt) + " , " + rtText.height);}}}}// ZC: <tspan/> 的宽度 就是 == <text/>的宽度？
window.onload = function(evt){var strTextContent = "中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。中文测试text内容。";var eleSvg = document.getElementsByTagName("svg")[0];var strNS = eleSvg.getAttribute("xmlns");var nodeText = document.createTextNode(strTextContent);var eleText = document.createElementNS(strNS, "text");//var eleText = document.createElement("text");
        eleSvg.appendChild(eleText);console.log("eleText : " + eleText);eleText.appendChild(nodeText);var rtText = eleText.getBBox();console.log(rtText.x + ", " + rtText.y + ", " + rtText.width + " , " + rtText.height);// ZC: just 文本
TextWordwrap_Horizontal(eleText, 100);};-->]]></script><rect x="0" y="-30" width="100" height="1" stroke="none" fill="blue"/><text id="textCalcLength" visibility="hidden" /></svg>
<?DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"?>

4、

5、

转载于:https://www.cnblogs.com/h5skill/p/9537603.html

SVG_text.动态创建换行显示（横）相关推荐

asp.net 包含动态创建控件的容器如果要切换显示/隐藏不要用 Visible 属性
asp.net 包含动态创建控件的容器如果要切换显示/隐藏不要用 Visible 属性就是不用 XXX.Visible = false; // true 因为这样该容器及其子控件会彻底的从页面上消 ...
GIthub创建文件夹、跳转链接、Read.me添加图片和换行显示等操作
有些小伙伴在GitHub创建一个仓库,想在仓库的文件夹下创建一个跳转链接,比如点击一个题目就跳转到微信公众号链接,那具体怎么操作呢?且听我慢慢道来~ 其实在GitHub上Read.me创建链接就相当于 ...
js动态创建元素和删除
动态创建元素的三种方式: 一.document.write(): 功能:向body的最后添加一段结构: 参数:字符串: 用法:document.write('这是内容<div>这是div& ...
Javascript:DOM动态创建元素实例应用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
新建异常并处理java_java – 动态创建异常的工厂模式
我创建了Exception xml并动态创建并抛出异常. com.package.CheckedException Checked Exception Message com.package.UnCh ...
换行显示print_r($arr);打印结果显示：Array( [0] = 百度 [1] = 阿里)
数组array是非常重要的数据类型.相对于其他的数据类型,它更像是一种结构,而这种结果构可以存储一系列数值.数组能够在单一变量名中存储许多值,并且能够通过引用下标号来访问某个值. 在 PHP 中,有三 ...
FineUIMvc随笔（1）动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. <FineUIMvc随笔>目录 FineUIMvc随笔(1)动态创建表格列 FineUIMvc随笔(2)怎样在控件中 ...
动态创建DataGrid的模版列（转）
有的时候我们需要邦定很复杂的DataGrid,我们知道DataGrid,DataList等控件都有Template列,我们可以通过动态的邦定模版列来实现,复杂逻辑的邦定.由于Page继承Templat ...
Java程序员从笨鸟到菜鸟之（八十七）跟我学jquery（三）jquery动态创建元素和常用函数示例
在上面两篇博客中列举了太多的API相信大家看着眼晕. 不过这些基础还必须要讲, 基础要扎实.其实对于这些列表大家可以跳过, 等以后用到时再回头看或者查询官方的API说明.在本博客中就给大家讲解一下这些 ...

SVG_text.动态创建换行显示（横）

SVG_text.动态创建换行显示（横）相关推荐

最新文章

热门文章