Об этом проекте
svgdom — это простая реализация DOM, предназначенная для запуска SVG.js в headless-режиме на Node.js. Хотя изначально она создавалась именно для этой цели, со временем она стала более функциональной и может использоваться всеми, кому нужен XML-, SVG- или HTML-DOM. Типичные сценарии использования включают генерацию SVG-файлов на сервере, тестирование SVG-кода без браузера и создание инструментов для конвейеров обработки ресурсов, которые анализируют или преобразуют геометрию SVG.
Для начала работы с SVG.js v3.x необходимо установить @svgdotjs/svg.js и svgdom. Вы импортируете createSVGWindow из svgdom и SVG вместе с registerWindow из @svgdotjs/svg.js. createSVGWindow возвращает окно с документом и корневым узлом SVG. После регистрации окна и документа вы создаёте холст из document.documentElement и используете SVG.js как обычно, например рисуете прямоугольник, задаёте заливку, перемещаете его, а затем выводите SVG в виде строки или через outerHTML.
Помимо SVG, svgdom может создавать HTML-окно с помощью createHTMLWindow или универсальное XML-окно с помощью createWindow, передавая URI пространства имён и корневой узел, например MathML. В Node.js 22.13 или новее svgdom можно загружать напрямую через require как модуль CommonJS.
В проекте документированы намеренные отклонения от DOM. Он отдаёт предпочтение небольшому и удобному API для headless-использования SVG, а не полному соответствию браузерному DOM. document.createElement наследует пространство имён документа, поэтому createSVGDocument().createElement('rect') создаёт SVGRectElement в пространстве имён SVG, в отличие от браузерного XML DOM, где createElement создаёт элемент без пространства имён и требуется createElementNS. Поведение HTML выводится из пространства имён документа: документ с пространством имён XHTML получает HTML-регистр имён, регистронезависимые селекторы типов HTML, сериализацию пустых элементов HTML и HTML-ограничение на CDATA. В настоящее время svgdom не реализует снисходительный алгоритм разбора HTML; HTMLParser и innerHTML используют строгий XML-парсер, поэтому разметка должна быть корректно сформирована, а восстановление после ошибок в разметке, необязательные закрывающие теги и подобное поведение не поддерживаются.
Для ограничивающих рамок текста сначала необходимо загрузить шрифты. svgdom по умолчанию загружает Open Sans-Regular, если для указанного шрифта не найден файл шрифта. Параметры конфигурации позволяют задать каталог шрифтов, сопоставить семейства шрифтов с файлами и предварительно загрузить шрифты, чтобы избежать задержки при первом использовании. Те же функции можно импортировать напрямую.
Известные ограничения включают поддержку таких свойств шрифта, как полужирный и курсив, только при явной загрузке соответствующего шрифта, например сопоставление Arial-italic с arial_italic.ttf. querySelector поддерживает ограниченный набор псевдоклассов: empty, first-child, last-child, nth-child, nth-last-child, first-of-type, last-of-type, nth-of-type, nth-last-of-type, only-child, only-of-type, has, is, root, not, matches, scope и where. Псевдоклассы nth-child и nth-last-child также поддерживают синтаксис селектора of. Значения атрибутов, содержащие закрывающую скобку, в настоящее время некорректно разбираются в селекторах, даже если они заключены в кавычки.
svgdom можно использовать в других проектах, хотя некоторые функции не нужны SVG.js и поэтому не реализованы или не протестированы. В README отмечено, что childNodes — это массив. Проект принимает сообщения о проблемах и пул-реквесты для необходимых функций, а также предлагает ссылки для пожертвований и спонсорства.
Comments
0 people shared their preference · Deer Point appears after 10 participants
Sign in to join the discussion.