http://dev.w3.org/SVG/profiles/1.1F2/test/svg/text-dom-01-f.svg

интереса я пытаюсь понять, как далеко я могу продвинуться в реализации браузера-клиента SVG для RIA, с которым я бездельничаю в свободное время.

Но ударил то, что кажется ОГРОМНЫМ камнем преткновения. Нет переноса слов !!

Кто-нибудь знает какую-нибудь работу (я думаю, какой-то JavaScript или специальный тег, который я не знаю)?

Если нет, то мне придется пойти по пути xhtml и начать прикреплять элементы HTML в моем SVG (ой), или просто вернуться через десять лет, когда SVG 1.2 будет готов.

Ответы на вопрос(8)

. Если вы можете в своем приложении отредактировать код, добавив в него tspan или любой другой метод, перейдите в него.

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

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

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

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

G, что дает наибольшую гибкость. 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

 peteorpeter07 авг. 2012 г., 19:00
Это техника, котораяmxgraph использует для этикеток (опционально). Это немного смущает, чтобы увидеть<body> завернутый в ваш основной<body> но это работает хорошо и добавляет тонну гибкости.
 Rich Apodaca29 апр. 2017 г., 02:20
Вторая ссылка не работает.
 Christopher Schultz14 мар. 2018 г., 17:20
Стоит отметить, что MS Edge поддерживает<foreignObject>, но похоже, что MSIE никогда не получит поддержку.

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

 peteorpeter07 авг. 2012 г., 19:03
Святые бананы, я не могу дождаться принятия этой спецификации!

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

 Steve Bennett29 янв. 2014 г., 07:09
Ссылка не работает. Похоже, вы слили его в svg.js?github.com/wout/svg.js
 wout29 янв. 2014 г., 10:18
Я остановил deve, lopment на этот плагин и пошел другим путем. Плагин все еще доступен здесь:gist.github.com/wout/6352742

К счастью, выМожно достичь хороших результатов, но это требует больше работы, чем использование 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-position, y-position и текст для отображения. Шрифт, максимальное количество символов в строке и цвет текста жестко прописаны в моей функции, но это можно легко изменить.

Чтобы отобразить правую метку, показанную на скриншоте выше, вы должны вызвать функцию, используя:

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

ОБНОВИТЬ

Я забыл упомянуть одну вещь.

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

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

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

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. Кажется, он лучше справляется с большими диаграммами.

 JasonMHirst19 июн. 2015 г., 14:12
Использовали это сегодня в моем собственном проекте, спасибо, Майк, работал безупречно!
 Mike Gledhill25 июл. 2013 г., 10:48
Ах, черт возьми, я не могу записать "действительно" сегодня !! Возможно, я должен изменить свою функцию, чтобы проверить орфографию надписей!
 Mike Gledhill19 июн. 2015 г., 14:21
Круто, хорошие вещи. (Разве жизнь не легче, когда есть рабочий пример, который можно позаимствовать !!)

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

Решение Вопроса

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

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

 ChrisInCambo24 янв. 2009 г., 11:00
Дэвид, спасибо за твой ответ. Я видел TSPAN, а также нашел сценарий, чтобы динамически заботиться о вещах -xml.com/pub/a/2002/09/11/quint.html

Ваш ответ на вопрос