Свойства элемента
Выбрав элемент изображения SVG, вы откроете редактор свойств элемента с интерфейсом, аналогичным редактору свойств компонента. Изменение значений свойств в редакторе свойств элемента изменяет атрибуты элемента SVG-файла, связанного с компонентом. Для каждого свойства можно обратиться к спецификации SVG 1.1, чтобы определить допустимые значения.
Кроме того, любое свойство элемента может быть объектом привязки, а на его значения можно ссылаться, как и на любое другое свойство, используя ссылки языка выражений.
Общие свойства
Свойства, которые являются общими для всех элементов SVG и всегда отображаются в редакторе свойств элемента, независимо от типа выбранного элемента.
Имя
Свойство имени предоставляет метку для SVG-элемента, позволяя идентифицировать и использовать его в качестве цели с помощью выражений.
Имя переменной | name |
---|---|
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
---|---|---|
name | String | Имя |
Заблокировать
Атрибут Заблокировать - это булево значение, которое может быть использовано для предотвращения непреднамеренных изменений элемента SVG. Когда этот параметр включен, элемент защищен от изменений.
Имя переменной | locked |
---|---|
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
---|---|---|
locked | Boolean | Заблокировать |
Видимость
Атрибут видимости - это булево значение, которое управляет тем, будет ли элемент SVG видимым или скрытым во время рендеринга. Соответствует атрибуту 'visibility', определенному в спецификации SVG 1.1.
Имя переменной | visibility |
---|---|
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
---|---|---|
visibility | Boolean | Видимость |
ID
HTML-идентификатор SVG-элемента, позволяющий ссылаться на него как на HTML-элемент, что дает возможность использовать скрипты, стили CSS и другие ссылки. Соответствует атрибуту 'id', определенному в спецификации SVG 1.1.
Имя переменной | id |
---|---|
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
id | String | ID |
Класс
Присваивает элементу одно или несколько имен классов и позволяет использовать элемент в качестве цели с помощью правил CSS или JavaScript для определенного стиля или поведения. Соответствует атрибуту 'class', определенному в спецификации SVG 1.1.
Имя переменной | class |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
class | String | Класс |
Прозрачность
Управляет прозрачностью элемента. Значение 1.0 означает полную непрозрачность (полностью видимый элемент), а значение 0.0 - полную прозрачность (полностью невидимый элемент). Соответствует атрибуту 'opacity', определенному в спецификации SVG 1.1.
Имя переменной | opacity |
Записи: | 1 |
Формат записи:
Поле | Тип поля | Описание поля |
opacity | Float | Прозрачность |
Трансформация
Применяет к элементу различные преобразования, такие как масштабирование, вращение, перевод и перекос, для изменения его положения и внешнего вида. Соответствует атрибуту 'transform', определенному в спецификации SVG 1.1.
Имя переменной | transform |
Записи: | 1 |
Формат записи:
Поле | Тип поля | Описание поля |
transform | String | Трансформация |
Ширина обводки
Определяет толщину в пикселях контура или рамки вокруг фигуры.
Имя переменной | strokeWidth |
Записи: | 1 |
Формат записи:
Поле | Тип поля | Описание поля |
strokeWidth | Integer | Ширина обводки |
Цвет обводки
Определяет цвет контура или границы элемента SVG. Он может быть задан с помощью значений цвета, например шестнадцатеричного, RGB или именованных цветов.
Имя переменной | stroke |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
stroke | Color | Цвет обводки |
Цвет заливки
Указывает цвет, используемый для заливки внутренней части элемента. Он может быть задан с помощью значений цвета, например шестнадцатеричного, RGB или именованных цветов.
Имя переменной | fill |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
fill | Цветной | Цвет заливки |
Координата X
Представляет собой горизонтальное положение элемента. Указывает, на каком расстоянии от левой части холста SVG должен располагаться левый край элемента.
Имя переменной | x |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
x | Float | Координата X |
Координата Y
Представляет собой вертикальное положение элемента. Определяет, на каком расстоянии от вершины холста SVG должен находиться верхний край элемента.
Имя переменной | y |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
y | Float | Координата Y |
Ширина
Определяет горизонтальный размер или ширину элемента. Измеряется в пользовательских координатах.
Имя переменной | width |
Записи: | 1 |
Формат записи:
Поле | Тип поля | Описание поля |
width | Float | Ширина |
Высота
Определяет вертикальный размер или высоту элемента. Он измеряется в пользовательских координатах.
Имя переменной | height |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
height | Float | Высота |
Свойства элемента Текст
Помимо общих свойств, элементы Текст
имеют следующие свойства.
Текст
Определяет текстовое содержимое элемента.
Имя переменной | text |
Записи: | 1 |
Формат записи:
Поле | Тип поля | Описание поля |
text | String | Текст |
Смещение по Y
Указывает вертикальное смещение текста. Соответствует атрибуту 'dy', определенному в спецификации SVG 1.1.
Имя переменной | dy |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
dy | Float | Смещение по Y |
Смещение по X
Указывает горизонтальное смещение текста. Соответствует атрибуту 'dx', определенному в спецификации SVG 1.1.
Имя переменной | dx |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
dx | Float | Смещение по x |
Вращение
Укажите угол вращения, применяемый к каждому символу текста.
Имя переменной | rotate |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
rotate | Integer | Вращение |
Начертание шрифта
Указывает вес шрифта из следующих вариантов:
Светлый
Полужирный
Жирнее
Обычный
Имя переменной | fontWeight |
Записи: | 1 |
Формат записи:
Поле | Тип поля | Описание поля |
fontWeight | String | Начертание шрифта |
Размер шрифта
Установка размера шрифта в пикселях.
Имя переменной | fontSize |
Записи: | 1 |
Формат записи:
Поле | Тип поля | Описание поля |
fontSize | Integer | Размер шрифта |
Семейство шрифта
Укажите нужный шрифт, который будет применен к тексту.
Имя переменной | fontFamily |
Записи: | 1 |
Формат записи:
Поле | Тип поля | Описание поля |
fontFamily | String | Семейство шрифта |
Свойства линейного элемента
Следующие свойства доступны для элементов линии.
Первая X координата
Обозначает координату по оси X первой точки линии. Соответствует атрибуту 'x1', определенному в спецификации SVG 1.1.
Имя переменной | x1 |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
x1 | Float | Первая координата X |
Первая Y координата
Обозначает координату по оси Y первой точки линии. Соответствует атрибуту 'y1', определенному в спецификации SVG 1.1.
Имя переменной | y1 |
Записи: | 1 |
Формат записи:
Поле | Тип поля | Описание поля |
y1 | Float | Первая Y координата |
Вторая X координата
Обозначает координату по оси X второй точки линии. Соответствует атрибуту 'x2', определенному в спецификации SVG 1.1.
Имя переменной | x2 |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
x2 | Float | Вторая X координата |
Вторая Y координата
Обозначает координату по оси Y второй точки линии. Соответствует атрибуту 'y2', определенному в спецификации SVG 1.1.
Имя переменной | y2 |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
y2 | Float | Вторая Y координата |
Свойства элементов окружности
Дополнительные свойства, применяемые к элементам окружности.
Радиус
Определяет размер окружности от ее центра до периметра. Соответствует атрибуту 'r', определенному в спецификации SVG 1.1.
Имя переменной | r |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
r | Float | Радиус |
Координата CX
Указывает X-координату центра окружности. Соответствует атрибуту 'cx', определенному в спецификации SVG 1.1.
Имя переменной | cx |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
cx | Float | Координата CX |
Координата CY
Указывает координату Y центра окружности. Соответствует атрибуту 'cy', определенному в спецификации SVG 1.1.
Имя переменной | cy |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
cy | Float | Координата CY |
Свойства прямоугольника
Дополнительные свойства, применяемые к элементам прямоугольника.
Радиус X
Радиус X эллипса, используемого для скругления углов закругленного прямоугольника. Соответствует атрибуту 'rx', определенному в спецификации SVG 1.1.
Имя переменной | rx |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
rx | Float | Радиус X |
Радиус Y
Радиус оси Y эллипса, используемого для скругления углов закругленного прямоугольника. Соответствует атрибуту 'ry', определенному в спецификации SVG 1.1.
Имя переменной | ry |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
ry | Float | Радиус Y |
Свойства элементов эллипса
Дополнительные свойства, применяемые к элементам эллипса.
Координата CX
Указывает X-координату центра эллипса. Соответствует атрибуту 'cx', определенному в спецификации SVG 1.1.
Имя переменной | cx |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
cx | Float | Координата CX |
Координата CY
Указывает координату Y центра эллипса. Соответствует атрибуту 'cy', определенному в спецификации SVG 1.1.
Имя переменной | cy |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
cy | Float | Координата CY |
Радиус X
Управляет округлением эллипса относительно оси X. Соответствует атрибуту 'rx', определенному в спецификации SVG 1.1.
Имя переменной | rx |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
rx | Float | Радиус X |
Радиус Y
Управляет округлением эллипса относительно оси Y. Соответствует атрибуту 'ry', определенному в спецификации SVG 1.1.
Имя переменной | ry |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
ry | Float | Радиус Y |
Свойства элементов полигонов и полилиний
Следующие свойства применяются к элементам полигонов и полилиний.
Точки
Строка, определяющая список точек, которые определяют элемент полигона или полилинии. Соответствует атрибуту 'Точки', определенному в спецификации SVG 1.1.
Имя переменной | точки |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
точки | String | Точки |
Свойства элементов пути
Следующие свойства применяются к элементам пути.
Путь
Строка, определяющая путь полигона или полилинии. Соответствует атрибуту 'd', определенному в спецификации SVG 1.1.
Имя переменной | d |
Записи: | 1 |
Формат записи:
Имя поля | Тип поля | Описание поля |
d | String | Путь |