在SVG中将文本修剪为给定的像素宽度

Question

我在 SVG 中绘制文本标签。我有一个可用的固定宽度（比如 200 像素）。文字太长，怎么剪？

理想的解决方案还会在文本被剪切的位置添加省略号 (...)。但我也可以没有它。

Answer 1

我的方法与 OpherV 类似，但我尝试使用 JQuery 进行此操作

function getWidthOfText(text, fontSize, fontFamily) {
    var span = $('<span></span>');
    span.css({
       'font-family': fontFamily,
        'font-size' : fontSize
    }).text(text);
    $('body').append(span);
    var w = span.width();
    span.remove();
    return w;
}

function getStringForSize(text, size, fontSize, fontFamily) {
    var curSize = getWidthOfText(text, fontSize, fontFamily);
    if(curSize > size)
    {
        var curText = text.substring(0,text.length-5) + '...';
        return getStringForSize(curText, size, fontSize, fontFamily);
    }
    else
    {
        return text;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

现在当调用getStringForSize('asdfasdfasdfasdfasdfasdf', 110, '13px','OpenSans-Light') 时，你会得到“asdfasdfasdfasd...”

Answer 2

有几种变体使用 d3 和循环来搜索适合的较小文本。这可以在没有循环的情况下实现，并且工作得更快。 textNode - d3 节点。

clipText(textNode, maxWidth, postfix) {
        const textWidth = textNode.getComputedTextLength();       
        if (textWidth > maxWidth) {
            let text = textNode.textContent;
            const newLength = Math.round(text.length * (1 - (textWidth - maxWidth) / textWidth));
            text = text.substring(0, newLength);
            textNode.textContent = text.trim() + postfix;
        }
    }

Answer 3

linearGradient 元素可用于生成纯 SVG 解决方案。此示例淡出截断的文本（无省略号）：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <defs>
    <linearGradient gradientUnits="userSpaceOnUse" x1="0" x2="200" y1="0" y2="0" id="truncateText">
      <stop offset="90%" stop-opacity="1" />
      <stop offset="100%" stop-opacity="0" />
    </linearGradient>
    <linearGradient id="truncateLegendText0" gradientTransform="translate(0)" xlink:href="#truncateText" />
    <linearGradient id="truncateLegendText1" gradientTransform="translate(200)" xlink:href="#truncateText" />
  </defs>

  <text fill="url(#truncateLegendText0)" font-size="50" x="0" y="50">0123456789</text>
  <text fill="url(#truncateLegendText1)" font-size="50" x="200" y="150">0123456789</text>
  
</svg>

（我不得不使用线性渐变来解决这个问题，因为我使用的 SVG 渲染器不支持 textPath 解决方案。）

Answer 4

试试这个，我在我的图表库中使用了这个功能：

function textEllipsis(el, text, width) {
  if (typeof el.getSubStringLength !== "undefined") {
    el.textContent = text;
    var len = text.length;
    while (el.getSubStringLength(0, len--) > width) {}
    el.textContent = text.slice(0, len) + "...";
  } else if (typeof el.getComputedTextLength !== "undefined") {
    while (el.getComputedTextLength() > width) {
      text = text.slice(0,-1);
      el.textContent = text + "...";
    }
  } else {
    // the last fallback
    while (el.getBBox().width > width) {
      text = text.slice(0,-1);
      // we need to update the textContent to update the boundary width
      el.textContent = text + "...";
    }
  }
}

Answer 5

@user2846569 告诉我怎么做（是的，使用 d3.js）。但是，我必须做一些小改动才能工作：

         function wrap( d ) {
                var self = d3.select(this),
                    textLength = self.node().getComputedTextLength(),
                    text = self.text();
                while ( ( textLength > self.attr('width') )&& text.length > 0) {
                    text = text.slice(0, -1);
                    self.text(text + '...');
                    textLength = self.node().getComputedTextLength();
                }
            }
            svg.append('text')
                .append('tspan')
                .text(function(d) { return d; }) 
                .attr('width', 200 )
                .each( wrap );

Answer 6

使用 d3 库

溢出文本的包装函数：

    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);

Answer 7

实施 Erik 的第三个建议我想出了这样的事情：

//places textString in textObj, adds an ellipsis if text can't fit in width
function placeTextWithEllipsis(textObj,textString,width){
    textObj.textContent=textString;

    //ellipsis is needed
    if (textObj.getSubStringLength(0,textString.length)>=width){
        for (var x=textString.length-3;x>0;x-=3){
            if (textObj.getSubStringLength(0,x)<=width){
                textObj.textContent=textString.substring(0,x)+"...";
                return;
            }
        }
        textObj.textContent="..."; //can't place at all
    }
}

似乎可以解决问题:)

Answer 8

一种方法是使用textPath 元素，因为所有脱离路径的字符都会被自动剪掉。请参阅 SVG 测试套件中的文本路径 examples。

另一种方法是在 svg 文本元素上使用 CSS3 text-overflow，例如 here。 Opera 11 支持这一点，但您可能会发现其他浏览器目前仅在 html 元素上支持它。

您也可以测量文本字符串并使用脚本自己插入省略号，我建议在文本元素上使用getSubStringLength 方法，增加 nchars 参数直到找到合适的长度。