将 SVG 文本更改为 css 自动换行 [英] change SVG text to css word wrapping

问题描述

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

The following code is used to show the text labels of a javascript tree diagram.

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 文本?

This uses svg, which has no word wrapping ability. How do I change this do a normal paragraph

so that I may use css to word wrap it. How do I make this regular text and not svg text?

推荐答案

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

You probably want to use the SVG foreignObject tag, so you would have something like this:

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

Here is a gist by Mike Bostock which helped me: https://gist.github.com/1424037

这篇关于将 SVG 文本更改为 css 自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！