SVG:使用getComputedTextLength来换行文本

SVG: using getComputedTextLength to wrap text

本文关键字：换行 文本 getComputedTextLength 使用 SVG      更新时间：2023-09-26

我试图通过建立一个文本字符串来包装文本，并使用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元素中，然后为每个元素添加文本。

结果类似于:

<text>
  <tspan>Whatever text</tspan>
  <tspan>you want here.</tspan>
</text>

为了使getComputerTextLength工作，您需要首先创建tspan(或text)元素，并确保它在DOM中。还要注意，为了向tspan元素添加文本，您需要使用createTextNode()并附加结果。

溢出文本的包装器函数:

    function wrap() {
        var self = d3.select(this),
            textLength = self.node().getComputedTextLength(),
            text = self.text();
        while (textLength > (width - 2 * padding) && text.length > 0) {
            text = text.slice(0, -1);
            self.text(text + '...');
            textLength = self.node().getComputedTextLength();
        }
    }

用法:

text.append('tspan').text(function(d) { return d.name; }).each(wrap);

相关文章：