inside - text tag svg

SVG Word Wrap-¿Mostrar stopper?

Question

Para divertirme, estoy tratando de ver hasta dónde puedo llegar para implementar un cliente de navegador SVG para una RIA con la que me estoy metiendo en mi tiempo libre.

Pero han golpeado lo que parece ser un gran obstáculo. ¡No hay palabras para envolver!

¿Alguien sabe de algún trabajo (estoy pensando en algún tipo de JavaScript o etiqueta especial que no sé)?

Si no, voy a tener que ir a la ruta xhtml y comenzar a pegar elementos HTML en mi SVG (ouch), o simplemente volver a aparecer en diez años cuando SVG 1.2 esté listo.

Answer 1

En estos días, flowPara puede realizar el ajuste de palabras, pero todavía no he encontrado un navegador que lo admita correctamente.

Answer 2

Esto de SVG es desconcertante, ¿no?

Afortunadamente, puede lograr algunos buenos resultados, pero requiere más trabajo que usar el HTML 5.

Aquí hay una captura de pantalla de mi aplicación ASP.Net / SVG, que incluye un poco de envoltura de palabras "falsificada".

La siguiente función creará un elemento de texto SVG para usted, dividido en partes de tspan , donde cada línea no tiene más de 20 caracteres de longitud.

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

No es perfecto, pero es simple, rápido y los usuarios nunca notarán la diferencia.

Mi función createSVGtext () JavaScript toma tres parámetros: una posición x, posición y y el texto que se mostrará. La fuente, el máximo de caracteres por línea y el color del texto están codificados en mi función, pero esto se puede cambiar fácilmente.

Para mostrar la etiqueta de la derecha que se muestra en la captura de pantalla de arriba, llamaría a la función usando:

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

Y aquí está la función de 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;
}

La lógica para el ajuste de palabras se basa en este tutorial HTML5 Canvas

Espero que encuentres esto útil !

Micro

http://www.MikesKnowledgeBase.com

ACTUALIZAR

Una cosa que olvidé mencionar.

Esa pantalla del "Diagrama de flujo de trabajo" que he mostrado arriba fue originalmente escrita usando un lienzo HTML 5. Funcionó a la perfección, los íconos se podían arrastrar, los menús emergentes podían aparecer cuando se hacía clic en ellos, e incluso IE8 parecía feliz con eso.

Pero descubrí que si el diagrama se volvía "demasiado grande" (por ejemplo, 4000 x 4000 píxeles), no se inicializaba en todos los navegadores, no aparecía nada, pero , en lo que respecta al código JavaScript, todo funcionaba bien.

Por lo tanto, incluso con la comprobación de errores, mi diagrama estaba apareciendo en blanco, y no pude detectar cuándo estaba ocurriendo este problema importante.

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.

Entonces, esta es la razón por la que tuve que reescribir el código JavaScript para usar SVG. Simplemente parece funcionar mejor con diagramas más grandes.

Answer 3

He estado buscando una solución sobre el ajuste de palabras en svg por muchas horas (o muchos días). Si puede en su aplicación, edite su código para poner algún tspan, o cualquier otro método, entre en él.

El ajuste de texto se implementará en la versión 1.2, pero excepto Opera, ningún navegador lo implementará completamente (4 años, la especificación está en el W3 ...).

Debido a que tuve que usar algunas configuraciones de alineación, no pude usar ninguno de los códigos que muchos foros pueden proporcionar (ningún objeto extraño, ningún script carto ni nada).

Si publico este mensaje, es solo para ser útil para otras personas cuando se utiliza Google wrapping de palabras porque esta publicación está en el resultado superior y, en muchos casos, esta publicación no ayuda.

Aquí hay una solución genial, fácil y ligera: http://dev.w3.org/SVG/profiles/1.1F2/test/svg/text-dom-01-f.svg

Answer 4

La biblioteca svg.js tiene un plugin svg.textflow.js . No es ultra rápido, pero funciona. Incluso almacena texto desbordado en un atributo de datos para que pueda usarlo para crear columnas que fluyan continuamente. Aquí la página de ejemplo de flujo de texto .

Answer 5

SVGT 1.2 presenta el elemento textArea http://www.w3.org/TR/SVGTiny12/text.html#TextInAnArea , pero Opera 10 lo respalda experimentalmente en este momento. No sé si otros navegadores planean implementarlo alguna vez, aunque espero que lo hagan.

Answer 6

Según este document , parece que tspan puede dar la ilusión de la envoltura de palabras:

La etiqueta tspan es idéntica a la etiqueta de texto, pero se puede anidar dentro de las etiquetas de texto y dentro de ella misma. Junto con el atributo ''dy'', esto permite la ilusión del ajuste de palabras en SVG 1.1. Tenga en cuenta que ''dy'' es relativo al último glifo (personaje) dibujado.

Answer 7

También hay una etiqueta foreignObject. Luego puede incrustar HTML en SVG que le da la mayor flexibilidad. HTML es ideal para el diseño de documentos y ha sido pirateado para apoyar el diseño de aplicaciones, el diseño y todo lo que los desarrolladores desean. Pero su punto fuerte es la envoltura de palabras y el diseño del documento. Deje que HTML haga lo que mejor hace, y deje que SVG haga lo que mejor sabe hacer.

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

Esto funciona para la mayoría de los navegadores FireFox, Opera, Webkit, excepto IE (a partir de IE11). :-( Historia de la web, ¿no?

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

Answer 8

Un método alternativo es usar el objeto de cuadro de texto de Andreas Neuman.