将 SVG 文本更改为 css 自动换行

Posted

技术标签:

【中文标题】将 SVG 文本更改为 css 自动换行【英文标题】:change SVG text to css word wrapping 【发布时间】:2012-09-22 13:46:26 【问题描述】:

以下代码用于显示 javascript 树形图的文本标签。

nodeEnter.append("svg:text")
        .attr("x", function(d)  return d._children ? -8 : -48; ) /*the position of the text (left to right)*/
        .attr("y", 3) /*the position of the text (Up and Down)*/

        .text(function(d)  return d.name; );

这使用 svg,它没有自动换行功能。我如何改变这个做一个正常的段落

以便我可以使用 css 自动换行。如何制作这个常规文本而不是 svg 文本?

【问题讨论】:

【参考方案1】:

这是使用 D3 自动换行文本的示例代码:

var nodes = [
    title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut"
]

var w = 960, h = 800;

var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

var vSeparation = 13, textX=200, textY=100, maxLength=20

var textHolder = svg.selectAll("text")
    .data(nodes)
    .enter().append("text")
    .attr("x",textX)
    .attr("y",textY)
    .attr("text-anchor", "middle")
    .each(function (d) 
        var lines = wordwrap(d.title, maxLength)

        for (var i = 0; i < lines.length; i++) 
            d3.select(this).append("tspan").attr("dy",vSeparation).attr("x",textX).text(lines[i])
        
    );


function wordwrap(text, max) 
    var regex = new RegExp(".0,"+max+"(?:\\s|$)","g");
    var lines = []

    var line
    while ((line = regex.exec(text))!="") 
        lines.push(line);
     

    return lines

【讨论】:

需要更多的自定义,但我喜欢它。它有效。 我能够修改您的技术以自动换行我的 X 轴标签。谢谢!同样作为参考,@mbostock 有一个更复杂的版本WrapLabels。最终,SVG 2.0 将包括自动换行。【参考方案2】:

你可能想要使用 SVG foreignObject 标签,所以你会有这样的东西:

nodeEnter.append("foreignObject")
    .attr("x", function(d)  return d._children ? -8 : -48; ) /*the position of the text (left to right)*/
    .attr("y", 3) /*the position of the text (Up and Down)*/
    .attr("width", your_text_width_variable)
    .attr("height", your_text_height_variable)
    .append("xhtml:body")
    .append("p")
    .text(function(d)  return d.name; );

这是 Mike Bostock 的一个要点,它帮助了我:https://gist.github.com/1424037

【讨论】:

我试过了,但现在没有文字出现。我正在尝试将此应用于bl.ocks.org/1249394,此示例。这是我问题中的代码的来源。是不是因为节点是 svg 圆圈而不起作用? 抱歉,应该包含 foreignObject 的宽度和高度 - 我已经修改了答案中的代码以使其更清晰 foreignObject 似乎是唯一的解决方案,但请注意,IE 不支持它(惊喜!) 有没有用 foreignObject 模拟text-anchor: middle; 效果?【参考方案3】:

foreignObject 不受 IE 支持,Chrome 也不支持其上的转换。如果这些限制没问题,那么我建议使用foreignObject,因为您可以获得 HTML+CSS 的所有格式。

如果您需要支持 IE 或转换,那么我建议使用 D3 插件,例如 D3plus。它使文本换行变得非常容易。

d3plus.textwrap()
  .container('selector')
  .draw();

结帐the docs 了解其所有功能。

【讨论】:

【参考方案4】:

您可以通过 D3.js 使用这个通用函数将 svg:text 元素中的文本包装成多个 svg:tspan 子元素(每行一个 tspan):

    function wrapText(text, width) 
        text.each(function () 
            var textEl = d3.select(this),
                words = textEl.text().split(/\s+/).reverse(),
                word,
                line = [],
                linenumber = 0,
                lineHeight = 1.1, // ems
                y = textEl.attr('y'),
                dx = parseFloat(textEl.attr('dx') || 0), 
                dy = parseFloat(textEl.attr('dy') || 0),
                tspan = textEl.text(null).append('tspan').attr('x', 0).attr('y', y).attr('dy', dy + 'em');

            while (word = words.pop()) 
                line.push(word);
                tspan.text(line.join(' '));
                if (tspan.node().getComputedTextLength() > width) 
                    line.pop();
                    tspan.text(line.join(' '));
                    line = [word];
                    tspan = textEl.append('tspan').attr('x', 0).attr('y', y).attr('dx', dx).attr('dy', ++linenumber * lineHeight + dy + 'em').text(word);
                
            
        );
    

你可以这样使用它:

svg.selectAll('text').call(wrapText, 100);

【讨论】:

以上是关于将 SVG 文本更改为 css 自动换行的主要内容,如果未能解决你的问题,请参考以下文章

css设置div自动换行wordwrap没有效果

css实现强制不换行/自动换行/强制换行

CSS3让文本自动换行——word-break属性

HTML如何换行

canvas转图片中的文字自动换行

css table取消自动换行问题