Demo | GitHub

<< предыдущая статья

Статья про редактор текста как на рисунке. Исходный код прилагается.

Многострочный текст в SVG

В SVG нет символа переноса строки. Для многострочного текста в SVG используется <tspan>.

<text x="0" y="0">
    <tspan x="0" y="0">Line 1</tspan>
    <tspan x="0" y="20px">Line 2</tspan>
    <!-- Line 3 is empty
    <tspan x="0" y="40px"></tspan> -->
    <tspan x="0" y="60px">Line 4</tspan>
</text>

Листинг 1. Многострочный текст в SVG. Третья строка пустая. Высота строки 20px.

Положение элементов <tspan> задается относительно верхнего края <text>. Значение атрибута ‘y’ надо рассчитывать.

Расчетов атрибута ‘y’ можно избежать. Листинг 2 дает тот же результат. Используется атрибут ‘dy’ с фиксированным значением. ‘dy’ указывает положение относительно предыдущего элемента.

<text x="0" y="0">
    <tspan x="0" dy="0">Line 1</tspan>
    <tspan x="0" dy="20px">Line 2</tspan>
    <tspan x="0" dy="20px" visibility="hidden">.</tspan>
    <tspan x="0" dy="20px">Line 4</tspan>
</text>

Листинг 2. Многострочный текст в SVG. Третья строка пустая. Высота строки 20px. Отступ задается относительно предыдущего элемента.

Формируем многострочную разметку на JavaScript

Функция ниже делает разметку с фиксированным атрибутом ‘dy’. Разметка получается как в листинге 2.

/**
 * create multiline tspan markup
 * @param {string} str
 * @param {number} lineHeight
 * @returns {string}
 */
function svgStrToTspan(str, lineHeight) {
    return str.split('\n').map((t, i) => {
        return `<tspan
            x="0"
            dy="${i === 0 ? '0' : `${lineHeight}px`}"
            ${t.length === 0 ? 'visibility="hidden"' : ''}>
 
                ${t.length === 0
                    ? '.'
                    : escapeHtml(t).replaceAll(' ', '&nbsp;')}
 
            </tspan>`;
    }).join('');
}

Листинг 3. Функция делает многострочную разметку

На рисунке 1 при добавлении строки текст смещается вверх. Таким образом текст всегда по центру круга. Листинге 4 показывает как это реализовано:

/**
 * @param {SVGTextElement} textEl target text element
 * @param {string} str
 * @param {{lineHeight:number, verticalMiddle?:number}} param
 * @returns {void}
 */
export function svgTextDraw(textEl, str, param) {
    textEl.innerHTML = svgStrToTspan(str, param.lineHeight);
    if (param.verticalMiddle != null) {
        textEl.y.baseVal[0].value =
            param.verticalMiddle - textEl.getBBox().height / 2;
    }
}

Листинг 4. Функция вставляет текст в SVG. При указании verticalMiddle текст центрируется по вертикали.

Редактор текста

Редактор должен поддерживать все стандартные возможности:

• навигацию по тексту, выделение, вставку, копирование;

• автозамену, проверку правописания;

• работать на пк и мобильных.

Для стандартных возможностей есть стандартная <textarea>.

Алгоритм работы редактора:

• Прозрачная <textarea> располагается над текстом.
  Шрифт <textarea> тоже прозрачный;

• При вводе вызывается svgTextDraw из листинга 4;

• Размеры и положение <textarea> пересчитываются.

Алгоритм реализован в функции textareaCreate. Код функции в отдельном файле на GitHub.

Редактор можно сделать для любого элемента <text>:

const textEditor = textareaCreate(
    // {SVGTextElement}
    textEl,
    // text params
    { lineHeight: 20, verticalMiddle: 10 },
    // init value
    'init text',
    // onchange
    val => {...},
    // onblur
    val => {...});
…
// delete textarea
textEditor.remove();

Листинг 5. Создание редактора текста для <text>

Другие статьи про dgrm.net

• JavaScript редактор SVG диаграмм который весит в 6,5 раз меньше bootstrap (библиотека с открытым исходным кодом)

• JavaScript редактор диаграмм, который открывает диаграммы из PNG картинок (open source)

• JavaScript редактор текста для SVG

Как поддержать проект

• Начните использовать редактор блок схем Dgrm.net.
  Расскажите что думаете. Любым способом: комментарии, личные сообщения, на GitHub.
  Все читаю, веду список предложений.

• Расскажите знакомым.

• Ставьте звездочки на GitHub.