SVG Zeilenumbruch - Show Stopper?

Question

Für Spaß Ich versuche, wie weit sehe ich bei der Umsetzung ein SVG-Browser-Client für eine RIA um mit in meiner Freizeit bekommen kann ich verwirren.

Aber getroffen haben, was ein riesiger Stein des Anstoßes zu sein scheint. Es gibt keinen Zeilenumbruch !!

Kennt jemand eine Arbeit um (ich bin eine Art von JavaScript oder spezielle Tag denken, weiß ich nicht)?

Wenn nicht ich entweder werde die xhtml Weg gehen müssen und starten Sie HTML-Elemente in meinem SVG kleben (autsch) oder kommen gerade wieder in zehn Jahren, als SVG 1.2 ist fertig.

Answer 1

Per dieses Dokument , scheint es, dass tspan kann die Illusion von Zeilenumbruch:

  

Das tspan-Tag ist mit dem Text-Tag identisch, aber kann innerhalb Text-Tags und in sich verschachtelt werden. In Verbindung mit dem ‚dy‘ führt dies ermöglicht die Illusion des Zeilenumbruchs in SVG 1.1. Beachten Sie, dass ‚dy‘ ist relativ zum letzten Glyphe (Zeichen) gezogen.

Answer 2

Es gibt auch foreign-Tag. Dann können Sie HTML in SVG einbetten, die die größte Flexibilität. HTML ist für Dokument-Layout und hat kein Ende gehackt Anwendung Layout zu unterstützen, zeichnen, und alles, was wir Entwickler wollen. Aber es Stärke ist der Zeilenumbruch und Dokumentenlayout. Lassen Sie HTML tun, was es am besten kann, und lassen Sie SVG tun, was sie am besten kann.

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

Dies funktioniert für die meisten Browser FireFox, Opera, Webkit, außer IE (ab IE11). :-( Geschichte der Bahn ist es nicht?

http://schmerg.com/svg- Unterstützung-in-ie9-close-but-sollte-try-harde

Answer 3

Dieses SVG Zeug ist rätselhaft, nicht wahr?

Zum Glück, Sie können ein paar gute Ergebnisse erzielen, aber es braucht mehr Arbeit, als die HTML-5 verwendet wird.

Hier ist ein Screenshot von meinem ASP.Net / SVG-App, ein bisschen "gefälschten" Zeilenumbruch mit.

Die folgende Funktion wird ein SVG Text Element für Sie, gebrochen in tspan Stücke erstellen, in der jede Zeile ist nicht mehr als 20 Zeichen lang sein.

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

Es ist nicht perfekt, aber es ist einfach, schnell, und die Benutzer werden nie wissen den Unterschied.

Sie createSVGtext () JavaScript-Funktion nimmt drei Parameter: eine x-Position, y-Position und der Text angezeigt werden. Die Schriftart, die maximale-Zeichen pro Zeile und Textfarbe sind alle in meiner Funktion fest einprogrammiert, aber dies kann leicht geändert werden.

Um die rechte Markierung in dem obigen Screenshot angezeigt werden, würden Sie die Funktion aufrufen mit:

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

Und hier ist die JavaScript-Funktion:

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;
}

Die Logik für Zeilenumbruch basiert auf diesen HTML5 Canvas-Tutorial

Ich hoffe, dass Sie dies nützlich finden!

Mike

http://www.MikesKnowledgeBase.com

UPDATE

Eine Sache, die ich vergaß zu erwähnen.

Die „Workflow-Diagramm“ -Anzeige, die ich oben gezeigt habe ursprünglich geschrieben wurde nur eine HTML-5 Leinwand mit . Es funktionierte wunderbar, werden die Symbole gezogen könnten, Popup-Menüs angezeigt werden können, wenn man auf sie geklickt haben, und sogar IE8 schien zufrieden.

Aber ich fand, dass, wenn das Diagramm wird „zu groß“ (zB 4000 x 4000 Pixel), dann würde das in allen Browsern zu initialisieren scheitern, würde nichts erscheinen - und - soweit die JavaScript-Code anging, alles funktioniert gut.

Also, auch mit Fehlerprüfung, mein Diagramm wurde erscheinen leer, und ich war nicht in der Lage zu erkennen, wenn dieses Hemmschuh Problem auftritt.

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.

Also, das ist, warum ich SVG hatte zu dem JavaScript-Code neu zu schreiben anstatt zu verwenden. Es scheint nur mit größeren Diagramme besser fertig zu werden.

Answer 4

SVGT 1.2 stellt das Textfeld Element http://www.w3.org/ TR / SVGTiny12 / text.html # TextInAnArea , aber es wird nur experimentell unterstützt von Opera 10 im Moment. Ich weiß nicht, ob andere Browser auch immer es auf die Umsetzung der Planung wird, obwohl ich hoffe, sie werden.

Answer 5

Die svg.js Bibliothek hat eine svg.textflow.js Plugin. Es ist nicht besonders schnell, aber es funktioniert der Trick. Es gibt sogar speichert Text in einem Datenattribut überfüllt, so dass Sie es kontinuierlich fließende Spalten erstellen können. Hier wird der Text Beispiel fließen.

Answer 6

Eine alternative Methode ist Andreas Neuman Textfeld Objekt zu verwenden.

Answer 7

In diesen Tagen flowPara können Zeilenumbruch tun, aber ich habe noch einen Browser zu finden, die es richtig unterstützt.

Answer 8

Ich habe für eine Lösung über den Zeilenumbruch in svg so viele Stunden (oder viele Tage) suchen. Wenn Sie in Ihrer Anwendung können Sie Ihren Code bearbeiten, um einige tspan zu setzen, oder jede andere Methode, in ihm gehen.

Textumbruch in der Version 1.2 wird implementieren wird aber außer Oper, kein Browser sie vollständig noch implementieren (4 Jahre, die Spezifikation sind auf der W3 ...).

Weil ich hatte einige Ausrichtungseinstellungen zu verwenden, ich konnte keine des Code verwenden, dass viele Foren (kein fremdes Objekt, keinen carto Skript oder etwas) zur Verfügung stellen können.

Wenn ich diese Nachricht zu verfassen, es ist nur um ein paar andere Leute sehr nützlich zu sein, wenn Zeilenumbruch svg googeln, weil dieser Beitrag auf dem Top-Ergebnis und in vielen Fällen, dieser Beitrag hilft nicht.

Hier ist eine coole, einfach und leichte Lösung: http: //dev.w3. org / SVG / profiles / 1.1F2 / test / svg / Text-dom-01-f.svg