SVG 自动换行 - 显示停止符？

Question

为了好玩，我尝试看看在业余时间为 RIA 实现 SVG 浏览器客户端能走多远。

但遇到了似乎是一个巨大的绊脚石。 没有自动换行！！

有谁知道有什么解决办法吗（我在想某种我不知道的 JavaScript 或特殊标签）？

如果不是，我要么必须走 xhtml 路线并开始在我的 SVG 中粘贴 HTML 元素（哎呀），要么十年后 SVG 1.2 准备好时再回来。

Answer 1

SVGT 1.2 引入了 textArea 元素 http://www.w3.org/TR/SVGTiny12 /text.html#TextInAnArea ，但目前仅 Opera 10 实验性支持。 我不知道其他浏览器是否会计划实现它，但我希望他们会这样做。

Answer 2

svg.js 库有一个 svg.textflow.js 插件。 它不是超快，但它确实有效。 它甚至将溢出文本存储在数据属性中，以便您可以使用它来创建连续流动的列。 这里是文本流示例页面。

Answer 3

另一种方法是使用 Andreas Neuman 的 文本框 对象。

Answer 4

如今，flowPara 可以自动换行，但我还没有找到正确支持它的浏览器。

Answer 5

我一直在寻找有关 svg 中自动换行的解决方案几个小时（或很多天）。
如果您可以在您的应用程序中编辑代码以添加一些 tspan 或任何其他方法，请加入其中。

文本换行将在 1.2 版本中实现，但除了 Opera 之外，还没有浏览器完全实现它（4 年了，规范在 W3 上......）。

因为我必须使用一些对齐设置，所以我无法使用许多论坛可以提供的任何代码（没有异物，没有 carto 脚本或任何东西）。

如果我发布此消息，只是为了在谷歌搜索自动换行 svg 时对其他人有用，因为这篇文章位于顶部结果中，并且在许多情况下，这篇文章没有帮助。

这是一个很酷、简单且轻便的解决方案：
http://dev.w3。 org/SVG/profiles/1.1F2/test/svg/text-dom-01-f.svg

Answer 6

这个 SVG 东西令人困惑，不是吗？

值得庆幸的是，您可以取得一些好的结果，但这比使用 HTML 5 需要更多的工作。

这是我的 ASP.Net / SVG 应用程序的屏幕截图，其中包含一些“伪造”的自动换行。

以下函数将为您创建一个 SVG text 元素，分为 < tspan 片段，每行长度不超过 20 个字符。

<text x="600" y="400" font-size="12" fill="#FFFFFF" text-anchor="middle">
    <tspan x="600" y="400">Here a realy long </tspan>
    <tspan x="600" y="416">title which needs </tspan>
    <tspan x="600" y="432">wrapping </tspan>
</text>

它并不完美，但它简单、快速，而且用户永远不会知道其中的区别。

我的 createSVGtext() JavaScript 函数采用三个参数：x 位置、y 位置和要显示的文本。 字体、每行最大字符数和文本颜色都在我的函数中进行了硬编码，但这可以轻松更改。

要显示上面屏幕截图中显示的右侧标签，您可以使用以下方式调用该函数：

var svgText = createSVGtext("Here a realy long title which needs wrapping", 600, 400);
$('svg').append(svgText);

这是 JavaScript 函数：

function createSVGtext(caption, x, y) {
    //  This function attempts to create a new svg "text" element, chopping 
    //  it up into "tspan" pieces, if the caption is too long
    //
    var svgText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    svgText.setAttributeNS(null, 'x', x);
    svgText.setAttributeNS(null, 'y', y);
    svgText.setAttributeNS(null, 'font-size', 12);
    svgText.setAttributeNS(null, 'fill', '#FFFFFF');         //  White text
    svgText.setAttributeNS(null, 'text-anchor', 'middle');   //  Center the text

    //  The following two variables should really be passed as parameters
    var MAXIMUM_CHARS_PER_LINE = 20;
    var LINE_HEIGHT = 16;

    var words = caption.split(" ");
    var line = "";

    for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + " ";
        if (testLine.length > MAXIMUM_CHARS_PER_LINE)
        {
            //  Add a new <tspan> element
            var svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
            svgTSpan.setAttributeNS(null, 'x', x);
            svgTSpan.setAttributeNS(null, 'y', y);

            var tSpanTextNode = document.createTextNode(line);
            svgTSpan.appendChild(tSpanTextNode);
            svgText.appendChild(svgTSpan);

            line = words[n] + " ";
            y += LINE_HEIGHT;
        }
        else {
            line = testLine;
        }
    }

    var svgTSpan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
    svgTSpan.setAttributeNS(null, 'x', x);
    svgTSpan.setAttributeNS(null, 'y', y);

    var tSpanTextNode = document.createTextNode(line);
    svgTSpan.appendChild(tSpanTextNode);

    svgText.appendChild(svgTSpan);

    return svgText;
}

自动换行的逻辑基于 此 HTML5 Canvas 教程

我希望您发现这很有用！

迈克

http://www.MikesKnowledgeBase.com

更新

我忘记提及一件事。

我上面显示的“工作流程图”屏幕最初只是使用 HTML 5 canvas 编写的。 它工作得很好，图标可以拖动，点击图标时会出现弹出菜单，甚至 IE8 似乎也对此很满意。

但我发现，如果图表变得“太大”（例如 4000 x 4000 像素），那么将无法在所有浏览器中初始化，不会出现任何内容 - 但是 - 就 JavaScript 代码而言担心，一切都很好。

因此，即使进行了错误检查，我的图表仍显示为空白，并且我无法检测到此问题何时发生。

var canvasSupported = !!c.getContext;
if (!canvasSupported) {
    //  The user's browser doesn't support HTML 5 <Canvas> controls.
    prompt("Workflow", "Your browser doesn't support drawing on HTML 5 canvases.");
    return;
}

var context = c.getContext("2d");
if (context == null) {
    //  The user's browser doesn't support HTML 5 <Canvas> controls.
    prompt("Workflow", "The canvas isn't drawable.");
    return;
}

//  With larger diagrams, the error-checking above failed to notice that
//  the canvas wasn't being drawn.

因此，这就是为什么我必须重写 JavaScript 代码以使用 SVG 的原因。 它似乎可以更好地处理更大的图表。

Answer 7

还有foreignObject标签。 然后您可以将 HTML 嵌入到 SVG 中，这提供了最大的灵活性。 HTML 非常适合文档布局，并且已经被不断地修改以支持应用程序布局、绘图以及我们开发人员想要的一切。 但它的优势在于自动换行和文档布局。 让 HTML 做它最擅长的事情，让 SVG 做它最擅长的事情。

http://www.w3.org/TR/SVG/extend.html

这适用于大多数浏览器 FireFox、Opera、Webkit，IE 除外（自 IE11 起）。 :-( 网络故事不是吗？

Answer 8

根据这个文档，似乎tspan可以给人自动换行的错觉：

tspan 标签与文本标签相同，但可以嵌套在文本标签及其自身内部。 与“dy”属性相结合，可以在 SVG 1.1 中产生自动换行的效果。 请注意，“dy”是相对于最后绘制的字形（字符）而言的。