JavaScript редактор текста для SVG21.04.2022 23:31

Рис 1. Текстовый редактор SVG с поддержкой выделения, копирования, вставки. Работает на пк и мобильных.Рис 1. Текстовый редактор SVG с поддержкой выделения, копирования, вставки. Работает на пк и мобильных.

Demo | GitHub

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

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

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

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

Рис 2. Многострочный текст, третья строка пустаяРис 2. Многострочный текст, третья строка пустая


    Line 1
    Line 2
    
    Line 4

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

Положение элементов задается относительно верхнего края . Значение атрибута «y» надо рассчитывать.

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


    Line 1
    Line 2
    .
    Line 4

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

Формируем многострочную разметку на 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 `
 
                ${t.length === 0
                    ? '.'
                    : escapeHtml(t).replaceAll(' ', ' ')}
 
            `;
    }).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 текст центрируется по вертикали.

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

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

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

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

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

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