Для удовольствия я пытаюсь понять, как далеко я могу добиться реализации клиента SVG-браузера для RIA, с которым я возился в свободное время.
Но поразите то, что кажется ОГРОМНЫМ камнем преткновения. Нет обертывания слов!
Кто-нибудь знает о какой-либо работе (я думаю, что какой-то JavaScript или специальный тег я не знаю)?
Если нет, мне придется либо перейти по пути xhtml, либо начать вставлять элементы HTML в SVG (ouch), или просто вернуться через десять лет, когда SVG 1.2 готов.
В этом документе, кажется, что tspan может дать иллюзию переноса слов:
Тег tspan идентичен текстовому тегу, но может быть вложен внутри текстовых тегов и внутри самого себя. В сочетании с атрибутом "dy" это позволяет иллюзию переноса слов в SVG 1.1. Обратите внимание, что 'dy' относится к последнему символу (символу).
Существует также тэг 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
Этот материал 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. Кажется, что он лучше справляется с большими диаграммами.
В SVGT 1.2 представлен элемент textArea http://www.w3.org/TR/SVGTiny12/text.html#TextInAnArea, но он только экспериментально поддерживается Opera 10 на данный момент. Я не знаю, планируют ли другие браузеры реализовать его, хотя я надеюсь, что они будут.
Библиотека svg.js имеет svg.textflow.js плагин. Это не очень быстро, но это трюк. Он даже сохраняет переполняющий текст в атрибуте данных, поэтому вы можете использовать его для создания непрерывно текущих столбцов. Здесь представлена страница примера текстового потока.
Альтернативным методом является использование объекта Andreas Neuman текстовое поле.
В наши дни flowPara может выполнять перенос слов, но мне еще не найти браузер, который его поддерживает должным образом.
Я искал решение о переносе слов в 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