SVG Word Wrap - 显示塞子?

时间:2009-01-24 09:44:36

标签: svg word-wrap

为了好玩,我试图看看我在实施一个RG的SVG浏览器客户端可以在多大程度上让我在闲暇时间搞乱。

但是看起来似乎是一个巨大的绊脚石。没有自动换行!!

有没有人知道任何工作(我在想某种JavaScript或我不知道的特殊标签)?

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

8 个答案:

答案 0 :(得分:15)

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

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

这适用于大多数浏览器FireFox,Opera,Webkit,IE除外(从IE11开始)。 :-(网络故事不是吗?

http://schmerg.com/svg-support-in-ie9-close-but-should-try-harde

答案 1 :(得分:13)

这个SVG的东西令人费解,不是吗?

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

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

enter image description here

以下函数将为您创建一个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;
}

自动换行的逻辑基于this HTML5 Canvas tutorial

我希望你觉得这很有用!

麦克

http://www.MikesKnowledgeBase.com

<强>更新

有一件事我忘了提及。

我上面显示的“工作流程图”屏幕最初只是使用HTML 5 画布编写的。它运行得很漂亮,图标可以被拖动,点击它们时可能会出现弹出菜单,甚至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.

因此,这就是为什么我必须重写JavaScript代码才能使用SVG。它似乎可以更好地应对更大的图表。

答案 2 :(得分:11)

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

答案 3 :(得分:10)

根据这个document,似乎 tspan 可以给出自动换行的错觉:

  

tspan标记与文本标记相同,但可以嵌套在文本标记内部和内部。与'dy'属性相结合,这允许SVG 1.1中的自动换行错觉。请注意,'dy'是相对于绘制的最后一个字形(字符)。

答案 4 :(得分:2)

svg.js库有一个svg.textflow.js插件。它不是超快但它可以解决问题。它甚至可以在数据属性中存储溢出的文本,因此您可以使用它来创建连续流动的列。 Here the text flow example page

答案 5 :(得分:0)

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

答案 6 :(得分:0)

现在,flowPara可以自动换行,但我还没有找到能够正确支持它的浏览器。

答案 7 :(得分:0)

我一直在寻找一个关于svg中自动换行的解决方案这么多小时(或很多天)。 如果你可以在你的应用程序中,编辑你的代码以放入一些tspan或任何其他方法。

文本包装将在1.2版本中实现,但除了opera之外,没有浏览器完全实现它(4年,规范在W3上......)。

因为我不得不使用一些对齐设置,所以我无法使用许多论坛可以提供的任何代码(没有外来对象,没有carto脚本或任何东西)。

如果我发布此消息,这只是为了在谷歌搜索自动翻译svg时对其他人有用,因为这篇文章在最高结果上,在很多情况下,这篇文章没有帮助。

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