Skip to content

Фигура

Фигура — декоративный SVG-блок. Сейчас доступны прямоугольник, эллипс, круг, треугольник и линия. Треугольник можно расширить до многоугольника или звезды через настройки точек. Используется для плашек, подложек, разделителей, указателей и графических акцентов без текста и медиа.

Настройки

В секции Style можно выбрать тип фигуры. Геометрия задаётся через положение и размер на фрейме, поворот. При выборе Circle виджет становится квадратным и блокирует соотношение сторон; при переключении на другую фигуру блокировка снимается. Визуал задаётся заливкой, скруглениями для прямоугольника и треугольника, обводкой, тенями и эффектами, прозрачностью, анимациями — в основном те же панели, что у других виджетов.

Заливка фигуры рендерится как SVG fill: поддерживаются сплошной цвет, linear gradient и radial gradient. Обводка рендерится как SVG stroke, поэтому для непрямоугольных фигур она ведёт себя как обводка контура, а не как CSS-рамка по сторонам блока. У треугольника доступны Points, Inner radius и Angle: 3 точки дают обычный треугольник, 6 точек — шестиугольник, Inner radius 100% оставляет обычный многоугольник, а значения ниже 100% чередуют внешний и внутренний радиус для звёздных форм. Angle сдвигает стартовую вершину внутри SVG без поворота всего контейнера. borderRadius применяется как общий радиус скругления вершин.

У линии цвет берётся из Color в секции Style, если обводка не задана; при включённой Stroke панели линия использует цвет, толщину и пунктир из обводки. Настройка Cap переключает плоский и скруглённый конец, а Start и End добавляют стрелки с нужной стороны. Drop shadow и inner shadow рендерятся SVG-фильтрами по контуру фигуры или линии.

Когда выбирать фигуру, а не картинку

Если нужен чистый цвет или простая форма без растрового файла — фигура легче и предсказунее масштабируется. Сложные иллюстрации по-прежнему лучше в изображении.