SVG Word Wrap - 显示塞子？

Question

为了好玩,我试着看看我能在多大程度上实现一个用于RIA的SVG浏览器客户端,我在业余时间搞乱了.

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

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

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

Answer 1

还有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

Answer 2

这个SVG的东西莫名其妙,不是吗？

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

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

以下函数将为您创建一个SVG 文本元素,分为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

UPDATE

我忘了提一件事.

我上面显示的"工作流程图"屏幕最初只是使用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.它似乎更适合更大的图表.

Answer 3

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

Answer 4

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

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