Этот SVG-материал сбивает с толку, не так ли?
К счастью, вы можете достичь хороших результатов, но это требует больше работы, чем использование HTML 5.
Вот снимок экрана моего приложения ASP.Net / SVG, показывающий немного «фальшивого» переноса слов.
Следующая функция создаст для вас элемент SVG text , разбитый на части 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>
Это не идеально, но просто, быстро, и пользователи никогда не узнают разницу.
My 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
Надеюсь, вы найдете это полезным!
Mike
http://www.MikesKnowledgeBase.com
UPDATE
Одна вещь, которую я забыл упомянуть.
Этот экран «Диаграмма рабочего процесса», который я показал выше, изначально был написан с использованием HTML 5 canvas . Он работал прекрасно, значки можно перетаскивать, всплывающие меню могут появляться при нажатии на них, и даже 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. Кажется, он лучше справляется с большими диаграммами.