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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/427037.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

python之sys

python之sys

python版本: Python 2.7.6 1: sys是python自带模块. 利用 import 语句输入sys 模块。 当执行import sys后, python在 sys.path 变量中所列目录中寻找 sys 模块文件。然后运行这个模块的主块中的语句进行初始化&#xff0c;然后就可以使用模块了 。 2: sys模块常见函数 可以通过…
阅读更多...
php在html中生成option,使用PHP可以将HTML SELECT/OPTION值设为NULL吗？

php在html中生成option,使用PHP可以将HTML SELECT/OPTION值设为NULL吗？

以下是我的HTML表单中的片段&#xff0c;从相应的表行中提取选项。我想要做的是将第一个选项值设置为NULL&#xff0c;因此当没有选择时&#xff0c;将表单提交到数据库时输入NULL。Type:$sql mysql_query("SELECT type_id, type FROM $tbl_add_type") or die(mysql…
阅读更多...
scrapy ip地址 tcp time out_TCP的运作流程（一）——“三次握手”

scrapy ip地址 tcp time out_TCP的运作流程（一）——“三次握手”

前言看过前面有关两篇HTTP的文章的同学&#xff0c;想必对HTTP已经有了一定的了解。在HTTP初始(一)中提到过TCP/IP四层网络模型&#xff0c;这次我们就来详细了解一下TCP传输。因为时间和篇幅所限&#xff0c;本篇讲分为两章&#xff0c;本章讲TCP的三次握手&#xff0c;下章讲…
阅读更多...
超级强大的socket工具ss，替代netstat

超级强大的socket工具ss，替代netstat

1、结论&#xff1a;ss 命令比netstat 更强大&#xff0c;提供功能更多&#xff0c;并且性能更高。 2、显示当前系统的socket占用总体宏观情况。 ss -s 当已创建的socket数过多时&#xff0c;已经说明系统配置存在问题。 3、显示tcp的socket情况 ss -a -t 显示udp的socket情况…
阅读更多...
c++,c.c#区别

c++,c.c#区别

C则一般看作是对C语言的扩展。 Java语言是一种完全的面向对象语言&#xff0c;虽然它的底层&#xff08;运行时库&#xff09;是用C语言开发的&#xff0c;可是并不依赖于C。 C#是微软开发的一种编程语言&#xff0c;语法类似Java&#xff0c;几乎就是从Java的翻版。 &#xff…
阅读更多...
php.ini 老薛,出现Allowed memory size of 134217728 bytes exhausted怎么办？

php.ini 老薛,出现Allowed memory size of 134217728 bytes exhausted怎么办？

有站长在交流群内说到使用 ZBlogPHP 建站在发布文章的时候总是出现以下错误&#xff1a;Allowed memory size of 134217728 bytes exhausted(tried to allocate 12288 bytes)允许耗尽内存大小为 134217728 字节(试图分配 12288 字节)具体如下图所示&#xff1a;134217728 bytes…
阅读更多...
python歌曲_python抓取并下载音乐歌曲

python歌曲_python抓取并下载音乐歌曲

import requestsimport jsonimport osclass My_Music():def __init__(self):print("*"*25"音乐抓取器""*"*25)key_name input(*请输入你要查找的歌曲名称*&#xff1a;)num input(*请输入你要查看歌曲列表第几页*&#xff1a;)self.headers {…
阅读更多...
UVA 1645 - Count（简单DP）

UVA 1645 - Count（简单DP）

题目链接 https://cn.vjudge.net/problem/UVA-1645 【题意】 输入n&#xff08;n<1000&#xff09;统计有多少个n个结点的有根树&#xff0c;使得每个深度中所有结点的子结点数相同 【思路】 设答案为dp[n]&#xff0c;肯定要拿一个结点作为根&#xff08;第0层&#xff0…
阅读更多...
winform窗体

winform窗体

WinForm是Net开发平台中对Windows Form的一种称谓。 中文名 Winform 特 点 功能强大 操作方便 新的数据提供程序管理 使用安全 利用公共语言运行库的安全特性 特点 Windows窗体的一些重要特点如下&#xff1a; 功能强大 Windows窗体可用于设计窗体和可视控件&#xff0c;以创建…
阅读更多...
win8配置mysql5.6,win8.1（64位） apache2.4.3+php5.6.3+mysql5.6安装

win8配置mysql5.6,win8.1（64位） apache2.4.3+php5.6.3+mysql5.6安装

Mysql5&period;5升级到5&period;7后MySQLdb不能正常使用的问题解决ubuntu系统 报错信息1 Type "help", "copyright", "credits" or "license&qu ...Python学习笔记之Beautiful Soup如何在Python3.x中使用Beautiful Soup 1.Beau…
阅读更多...
python词频统计结果写入csv_Python词频对比并导入CSV文件

python词频统计结果写入csv_Python词频对比并导入CSV文件

需要用到的停用词库我上传到我的资源了&#xff0c;大家也可以自己去网上找&#xff01;本来是想把两个词频统计放入一个CSV文件中&#xff0c;但是无奈向已经存在的CSV文件中追加写入数据只能在已经存在的数据下面追加&#xff0c;也就是在同一列追加&#xff0c;不能另起一列…
阅读更多...
计算公式

计算公式

公式&#xff1a; 1 网段数2^可变的网络ID位数 2 一个网段中主机数2^主机ID位数&#xff08;32-网络ID位数&#xff09;-2 3 CIDR无类域名路由:网络ID位数不确定&#xff0c;CIDR表示法&#xff1a;IP/网络ID位数 10.0.0.100/8 255.0.0.0 4 网络IDIP与netmask 5 判断目标主机是…
阅读更多...
实例3：python

实例3：python

#一个整数&#xff0c;它加上100后是一个完全平方数&#xff0c;再加上168又是一个完全平方数&#xff0c;请问该数是多少&#xff1f; #假设该数为 x。 #1、则&#xff1a;x 100 n2, x 100 168 m2 #2、计算等式&#xff1a;m2 - n2 (m n)(m - n) 168 #3、设置&…
阅读更多...
php word excel,PHP 生成word 和 excel 文档

php word excel,PHP 生成word 和 excel 文档

xmlns"http://www.w3.org/TR/REC-html40">word 中要显示的内容&#xff0c; 由于word支持html格式, 所以中间这一部分使用html文档就可以.?如果做文件下载:?header("Content-type:application/vnd.ms-word");header("Content-Disposition:filena…
阅读更多...
实例4：python

实例4：python

#输入某年某月某日&#xff0c;判断这一天是这一年的第几天&#xff1f; #!/usr/bin/python -- coding: UTF-8 -- #!/usr/bin/python -- coding: UTF-8 -- yearint(2019) monthint(8) dayint(13) months1[0,31,60,91,121,152,182,213,244,274,305,335,366] #闰年 months2[…
阅读更多...
堆排序python代码实现_python实现堆排序

堆排序python代码实现_python实现堆排序

首先理解堆排序&#xff1a;堆&#xff1a;堆栈是计算机的两种最基本的数据结构。堆的特点就是FIFO(first in first out)先进先出&#xff0c;这里的话我觉得可以理解成树的结构。堆在接收数据的时候先接收的数据会被先弹出。栈的特性正好与堆相反&#xff0c;是属于FILO(first…
阅读更多...
jq多选框全选，多选

jq多选框全选，多选

html代码 <input type"hidden" name"f_information_id" id"f_information_id" value"<?php echo $f_information_id?>"> <table class"table table-hover"><thead><tr><th> <inpu…
阅读更多...
无人驾驶技术（1）

无人驾驶技术（1）

无人驾驶汽车有望将在未来20年内得到广泛运用&#xff0c;各大科技公司和汽车厂商均在加大对无人驾驶的投入&#xff0c;资本也纷纷抢滩该万亿市场。 无人驾驶汽车依靠人工智能、视觉计算、雷达、监控装置和全球定位系统协同合作&#xff0c;通过电脑实现无人驾驶&#xff0c;可…
阅读更多...
php html登陆逻辑,保持演示文稿(HTML)和逻辑(PHP)分开

php html登陆逻辑,保持演示文稿(HTML)和逻辑(PHP)分开

我试图保持演示和逻辑分离,而不使用像Smarty这样的模板引擎.到目前为止我所做的工作是有效的,但我不知道如果不在我的演示文稿中添加更多PHP而不是我想做的事情.例如,现在我有这样的事情&#xff1a;product_list.phptry {$query $conn->prepare("SELECT p.id,p.name,…
阅读更多...
层次分析法matlab_建模开讲课程回放2：层次分析法及其MATLAB

层次分析法matlab_建模开讲课程回放2：层次分析法及其MATLAB

建模开讲&#xff1a;层次分析法及其MATLAB实践主讲人&#xff1a;于晶贤老师课程回放地址如下&#xff0c;大家可以复制链接到地址栏即可观看&#xff0c;也可以直接点击左下角的观看&#xff1a;https://ke.qq.com/webcourse/index.html?fromqqchat&cid493154&term_…
阅读更多...
最新文章

Copyright @ 2022~2023