svg

Начиная с Jmix 3.1

Компонент svg встраивает SVG-разметку непосредственно в экран.

XML-элемент

svg

Java-класс

Svg

Основы

Поместите разметку во вложенный элемент content и оберните её в секцию CDATA:

<svg id="statusSvg" css="color: seagreen">
    <content><![CDATA[
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"
             fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"/>
            <path d="m9 12 2 2 4-4"/>
        </svg>
    ]]></content>
</svg>
Секция CDATA обязательна. Без неё XML-парсер воспринимает SVG-теги как элементы дескриптора экрана, и экран не откроется, выбросив GuiDevelopmentException.
Компонент выводит разметку как есть. Если SVG получен из ненадёжного источника, например из файла, загруженного пользователем, перед передачей в компонент удалите из разметки опасное содержимое, такое как скрипты и обработчики событий. Иначе возможны межсайтовые скриптовые атаки (XSS).

У компонента нет атрибутов размера. Размер изображения определяют атрибуты width, height и viewBox корневого элемента <svg> в разметке.

Разметка становится частью страницы, поэтому к ней применяются стили страницы. Если в разметке для контуров и заливки используется currentColor, как в примере выше, изображение принимает цвет текста компонента, и этот цвет можно изменить через CSS. Компоненты image и svgIcon работают иначе: они показывают SVG-файл по URL, и стили страницы внутри изображения не действуют.

Содержимое из файла

Чтобы загрузить разметку из файла, используйте атрибут file:

<svg id="workflowSvg" file="com/company/onboarding/view/component/svg/workflow.svg"/>

Файл ищется с помощью интерфейса Resources. По умолчанию файл загружается из classpath. Также можно указать префикс classpath:, URL или путь к файлу в каталоге конфигурации. Подробнее см. в разделе Расположение ресурсов.

Если файл не найден, экран не откроется, выбросив GuiDevelopmentException. Если заданы и content, и file, компонент использует content.

Программная установка содержимого

Объявите компонент без content и file:

<svg id="dotSvg" css="color: orange"/>

Затем задайте разметку в контроллере экрана методом setSvg():

@ViewComponent
private Svg dotSvg;

@Subscribe
public void onInit(final InitEvent event) {
    dotSvg.setSvg("""
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
                <circle cx="8" cy="8" r="6" fill="currentColor"/>
            </svg>
            """);
}

Метод setSvg() также принимает InputStream, например, чтобы прочитать разметку из файла.

Разметка должна содержать элемент <svg>. XML-объявление и объявление типа документа перед ним удаляются. Если в разметке нет <svg>, метод выбрасывает IllegalArgumentException.

Атрибуты

Следующие атрибуты относятся к svg:

Имя Описание По умолчанию

file

Задаёт путь к файлу с SVG-разметкой. См. Содержимое из файла.

—

Компонент поддерживает следующие общие атрибуты:

id - alignSelf - classNames - colspan - css - justifySelf - visible

Обработчики

Компонент поддерживает следующие общие обработчики:

AttachEvent - DetachEvent

Элементы

Компонент svg может содержать элемент content с SVG-разметкой, обёрнутой в секцию CDATA. См. Основы.