SVG换行-显示停止符？

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

但却遇到了看似巨大的绊脚石。没有文字包装

有人知道有什么解决方法吗（我在想某种JavaScript或我不知道的特殊标记）

如果不是这样，我将不得不走xhtml路线，开始在我的SVG中粘贴HTML元素（哎哟），或者在SVG 1.2准备好的十年后再回来。

鉴于此，tspan似乎可以给人一种文字换行的错觉：

tspan标记与文本标记相同，但可以嵌套在文本标记内部和内部。再加上“dy”属性，这使得SVG1.1中出现了文字换行的错觉。请注意，“dy”相对于最后绘制的图示符（字符）

---

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

SVGT 1.2引入了textArea元素，但目前只有Opera 10在实验上支持它。我不知道其他浏览器是否会计划实现它，尽管我希望他们会这样做。

现在，flowPara可以进行文字包装，但我还没有找到一个浏览器能够正确支持它。

还有foreignObject标签。然后，您可以在SVG中嵌入HTML，这提供了最大的灵活性。HTML对于文档布局非常有用，它被黑客攻击得无穷无尽，以支持应用程序布局、绘图以及美国开发人员想要的一切。但它的优势在于文字包装和文档布局。让HTML做它最擅长的事情，让SVG做它最擅长的事情

这适用于大多数浏览器FireFox、Opera、Webkit，IE除外（从IE11开始）-（网络的故事，不是吗

---

我一直在寻找一种解决svg中文字包装问题的方法，用了这么多小时（或很多天）。 如果你可以在你的应用程序中，编辑你的代码以放置一些tspan，或者任何其他方法，那么进入它

文本包装将在1.2版本中实现，但除了opera，还没有浏览器完全实现它（4年，规范在W3上…）

因为我必须使用一些对齐设置，所以我不能使用许多论坛可以提供的任何代码（没有外来对象，没有carto脚本或任何东西）

如果我发布这条消息，只是为了在谷歌搜索word wrapping svg时对其他人有用，因为这篇文章是最重要的结果，在很多情况下，这篇文章没有帮助

这是一个凉爽、简单、轻便的解决方案：

---

该库有一个插件。虽然速度不是很快，但它做到了这一点。它甚至可以将溢出的文本存储在数据属性中，以便您可以使用它来创建连续流动的列。

这种SVG的东西令人费解，不是吗

谢天谢地，您可以获得一些好的结果，但这比使用HTML5需要更多的工作

下面是我的ASP.Net/SVG应用程序的屏幕截图，带有一点“伪造”的文字包装

下面的函数将为您创建一个SVGtext元素，分为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>

下面是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;
}

函数createSVGtext（标题，x，y）{
//此函数尝试创建一个新的svg“text”元素，即斩波
//如果标题太长，它会被分成“tspan”部分
//
var svgText=document.createElements（'http://www.w3.org/2000/svg","文本",；
svgText.setAttributeNS（null，'x'，x）；
svgText.setAttributeNS（null，'y'，y）；
setAttributeNS（null，'font size'，12）；
svgText.setAttributeNS（null，'fill'，'#FFFFFF'）；//白色文本
svgText.setAttributeNS（null，“文本定位”，“中间”）；//将文本居中
//以下两个变量实际上应该作为参数传递
每行var最大字符数=20；
变量线高度=16；
var words=标题。拆分（“”）；
var line=“”；
for（var n=0；n每行最大字符数）
{
//添加新元素
var svgTSpan=document.createElements（'http://www.w3.org/2000/svg","tspan",；
svgTSpan.setAttributeNS（null，'x'，x）；
svgTSpan.setAttributeNS（null，'y'，y）；
var tSpanTextNode=document.createTextNode（行）；
svgTSpan.appendChild（tSpanTextNode）；
svgText.appendChild（svgTSpan）；
行=字[n]+“”；
y+=直线高度；
}
否则{
直线=测试线；
}
}
var svgTSpan=document.createElements（'http://www.w3.org/2000/svg","tspan",；
svgTSpan.setAttributeNS（null，'x'，x）；
svgTSpan.setAttributeNS（null，'y'，y）；
var tSpanTextNode=document.createTextNode（行）；
svgTSpan.appendChild（tSpanTextNode）；
svgText.appendChild（svgTSpan）；
返回svgText；
}

单词包装的逻辑是基于

我希望你觉得这个有用

迈克

更新

有一件事我忘了提

我上面显示的“工作流图”屏幕最初是用HTML5画布编写的。它工作得很好，图标可以拖动，点击时弹出菜单可以出现，甚至IE8似乎也很满意

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

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

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.

var canvasSupported=！！c.getContext；
如果（！canvasSupported）{
//用户的浏览器不支持HTML 5控件。
提示（“工作流”，“您的浏览器不支持在HTML5画布上绘图。”）；
雷图
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.