SVG Word Wrap - Показать пробку?

Ответ 1

В этом документе, кажется, что tspan может дать иллюзию переноса слов:

Тег tspan идентичен текстовому тегу, но может быть вложен внутри текстовых тегов и внутри самого себя. В сочетании с атрибутом "dy" это позволяет иллюзию переноса слов в SVG 1.1. Обратите внимание, что 'dy' относится к последнему символу (символу).

Ответ 2

Существует также тэг foreignObject. Затем вы можете встроить HTML в SVG, что дает максимальную гибкость. 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

Ответ 3

Этот материал 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

Надеюсь, вы найдете это полезным!

Mike

http://www.MikesKnowledgeBase.com

UPDATE

Одна вещь, о которой я забыл упомянуть.

Этот экран диаграммы рабочего процесса, который я показал выше, изначально был написан только с помощью HTML 5 canvas. Он работал красиво, иконки можно было перетаскивать, всплывающие меню могли появляться, когда вы нажимали на них, и даже IE8 казался ему доволен.

Но я обнаружил, что если диаграмма станет "слишком большой" (например, 4000 х 4000 пикселей), тогда во всех браузерах не будет инициализироваться, ничего не появится - , но - насколько это возможно JavaScript-код, все работает нормально.

Итак, даже при проверке ошибок моя диаграмма выглядела пустой, и я не смог обнаружить, когда возникала эта проблема showstopper.

var canvasSupported = !!c.getContext;
if (!canvasSupported) {
    //  The user 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 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. Кажется, что он лучше справляется с большими диаграммами.

Ответ 4

В SVGT 1.2 представлен элемент textArea http://www.w3.org/TR/SVGTiny12/text.html#TextInAnArea, но он только экспериментально поддерживается Opera 10 на данный момент. Я не знаю, планируют ли другие браузеры реализовать его, хотя я надеюсь, что они будут.

Ответ 5

Библиотека svg.js имеет svg.textflow.js плагин. Это не очень быстро, но это трюк. Он даже сохраняет переполняющий текст в атрибуте данных, поэтому вы можете использовать его для создания непрерывно текущих столбцов. Здесь представлена ​​страница примера текстового потока.

Ответ 6

Альтернативным методом является использование объекта Andreas Neuman текстовое поле.

Ответ 7

В наши дни flowPara может выполнять перенос слов, но мне еще не найти браузер, который его поддерживает должным образом.

Ответ 8

Я искал решение о переносе слов в svg столько часов (или много дней). Если вы можете в своем приложении, отредактируйте свой код, чтобы поместить некоторые tspan или любой другой метод, зайдите в него.

Текстовая упаковка будет реализована в версии 1.2, но кроме оперы, браузер полностью не реализует ее (4 года, спецификация находится на W3...).

Поскольку мне приходилось использовать некоторые настройки выравнивания, я не мог использовать какой-либо код, который может предоставить многие форумы (нет постороннего объекта, нет carto script или что-то еще).

Если я опубликую это сообщение, это просто для того, чтобы быть полезным для некоторых других людей, когда goggling word wrapping svg, потому что это сообщение в верхнем результате и во многих случаях это сообщение не помогает.

Вот прохладное, легкое и легкое решение: http://dev.w3.org/SVG/profiles/1.1F2/test/svg/text-dom-01-f.svg