我试图通过构建文本字符串来换行文本,并使用 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(或文本)元素并确保它在 DOM 中。另请注意,为了将文本添加到 tspan 元素,您需要使用 createTextNode() 并附加结果。
关于javascript - SVG:使用 getComputedTextLength 来换行文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7046986/