我正在通过构建一个文本字符串来包装文本,并使用’getComputedTextLength’来查找文本何时超出了允许的宽度.但是,我找不到一种简单的方式来逐步构建可以使用getComputedTextLength的文本.
总体思路是：
总体思路是：
str = svgDocument.createTextNode(myText[word]); // first word on new line
word++;
obj = text.cloneNode(true); // new text element for this line
obj.appendChild(str);
svgDocument.documentElement.appendChild(obj); // reqd for getComputedTextLength?
for( ; word < myText.length; word++) {
next_width = obj.getComputedTextLength(); // get current line width
if(next_width >= extent)
break;
str += " "; // add next word to the line
str += myText[word];
...
}
任何人都可以告诉我如何让这个工作？大概’str’被复制而不是在’obj’中引用,但是我也尝试在循环中放置’obj.removeChild(str)’和’obj.appendChild(str)’,但是appendChild崩溃.我也尝试过围绕documentElement.appendChild移动的各种组合,并删除obj并重新附加它等等.
谢谢 –
人
解决方法
这应该工作：
var svgNS = "http://www.w3.org/2000/svg";
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 element
var 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 element
for(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 word
if (tspan_element.getComputedTextLength() > width)
{
tspan_element.firstChild.data = tspan_element.firstChild.data.slice(0,len); // Remove added word
var 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);
}
}
}
]]>
</script>
<text x="10" y="50" id="multiline-text"> </text>
它通过向文本元素添加tspan元素,然后向其中添加文本来起作用.
结果是这样的：
<text> <tspan>Whatever text</tspan> <tspan>you want here.</tspan> </text>
为了使getComputerTextLength工作,您需要首先创建tspan(或text)元素,并确保它在DOM中.另请注意,为了向tspan元素添加文本,您需要使用createTextNode()并附加结果.
