Element Properties
Selecting an element of the SVG image opens the Element Properties Editor, with an interface similar to the component Property Editor. Changing the values of properties in the Element Properties Editor updates the element attributes of the underlying SVG file associated with the component.
Furthermore, any element property can be the target of bindings, and its values can be referenced like any other property using the expression language references.
Common Properties
Properties that are common to all elements and will always appear in the Element Properties Editor, regardless of the type of element selected.
Name
The name property provides a label for the element, allowing it to be identified and targeted by expressions.
Variable Name: | name |
|---|---|
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
|---|---|---|
name | String | Name |
Lock
The locked attribute is a Boolean value that can be used to prevent unintended changes to an element. When enabled, the element is protected from modification.
Variable Name: | locked |
|---|---|
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
|---|---|---|
locked | Boolean | Lock |
Visibility
The visibility attribute is a Boolean value that controls whether an element is visible or hidden during rendering. Corresponds to the ‘visibility’ attribute defined in the SVG 1.1 specification.
Variable Name: | visibility |
|---|---|
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
|---|---|---|
visibility | Boolean | Visibility |
ID
The HTML identifier of the element, allowing it to be referenced as an HTML element and to be the target of scripting, CSS styling, and otherwise referenced. Corresponds to the ‘id’ attribute defined in the SVG 1.1 specification.
Variable Name: | id |
|---|---|
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
id | String | ID |
Class
Assigns one or more class names to the element and allows the element to be targeted by CSS rules or JavaScript for specific styling or behavior. Corresponds to the ‘class’ attribute defined in the SVG 1.1 specification.
Variable Name: | class |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
class | String | Class |
Opacity
Controls the transparency of the element. A value of 1.0 represents full opacity (fully visible), while a value of 0.0 represents complete transparency (completely invisible). Corresponds to the ‘opacity’ attribute defined in the SVG 1.1 specification.
Variable Name: | opacity |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
opacity | Float | Opacity |
Stroke Width
Defines the thickness in pixels of the outline or border around the shape.
Variable Name: | strokeWidth |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
strokeWidth | Integer | Stroke Width |
Stroke Color
Specifies the color of the outline or border of an element. It can be defined using color values like hexadecimal, RGB, or named colors.
Variable Name: | stroke |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
stroke | Color | Stroke Color |
Stroke Dash
Specifies the pattern of dashes and gaps used to render the outline of the element.
Corresponds to the stroke-dasharray attribute in the SVG 1.1 specification.
Variable Name: | strokeDash |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
|---|---|---|
strokeDash | String | Dash pattern applied to the element’s stroke |
Stroke Line Cap
Defines the shape used at the end of open subpaths when they are stroked.
Corresponds to the stroke-linecap attribute in the SVG 1.1 specification. Valid values are: butt, round, square.
Variable Name: | strokeLineCap |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
|---|---|---|
strokeLineCap | String | End-cap style applied to stroke endpoints |
Stroke Line Join
Specifies the shape to be used at the corners where two lines meet.
Corresponds to the stroke-linejoin attribute in the SVG 1.1 specification. Valid values are: miter, round, bevel.
Variable Name: | strokeLineJoin |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
|---|---|---|
strokeLineJoin | String | Corner join style for stroked paths |
Fill Color
Specifies the color used to fill the interior of the element. It can be defined using color values like hexadecimal, RGB, or named colors.
Variable Name: | fill |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
fill | Color | Fill Color |
X Coordinate
Represents the horizontal position of the element. It specifies how far from the left of the SVG canvas the element's left edge should be located.
Variable Name: | x |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
x | Float | X Coordinate |
Y Coordinate
Represents the vertical position of the element. It specifies how far from the top of the SVG canvas the element's top edge should be located.
Variable Name: | y |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
y | Float | Y Coordinate |
Transform Origin
Defines the pivot point around which all transformations are applied. This point acts as the anchor for the element and determines how it is rotated or scaled.
The transform origin can be adjusted by dragging the pivot point on the canvas, by selecting a value from the drop-down list, or by specifying X and Y coordinates in pixels or percentages.
This property has several selection values:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
Variable Name: | transformOrigin |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
transformOrigin | String | Transform Origin |
Rotation
Defines the rotation angle of the element in degrees. Positive values rotate the element clockwise.
If an element is part of a group, the group can also be rotated. Each element within the group retains its own rotation value and can be rotated independently of the group.
This property reflects the element’s total rotation, taking into account its own rotation and the rotation of all parent groups. For example, if a group is rotated by 30° and contains a rectangle rotated by 20°, the rectangle is displayed as rotated by 50°.
Variable Name: | rotation |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
rotation | Double | Rotation |
Width
Determines the horizontal size or width of the element. It is measured in user coordinates.
Variable Name: | width |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
width | Float | Width |
Height
Determines the vertical size or height of the element. It is measured in user coordinates.
Variable Name: | height |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
height | Float | Height |
Text Element Properties
In addition to the common properties, Text elements have the following properties.
Text
Specifies the text content of the element.
Variable Name: | text |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
text | String | Text |
Offset Y
Indicates the vertical offset of the text. Corresponds to the ‘dy’ attribute defined in the SVG 1.1 specification.
Variable Name: | dy |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
dy | Float | Offset Y |
Offset X
Indicates the horizontal offset of the text. Corresponds to the ‘dx’ attribute defined in the SVG 1.1 specification.
Variable Name: | dx |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
dx | Float | Offset X |
Font Weight
Specifies the font weight from among the following options:
Lighter
Bold
Bolder
Normal
Variable Name: | fontWeight |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
fontWeight | String | Font Weight |
Font Size
Set the size of the font in pixels.
Variable Name: | fontSize |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
fontSize | Integer | Font Size |
Font Family
Specify the desired font to apply to the text.
Variable Name: | fontFamily |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
fontFamily | String | Font Family |
Line Element Properties
The following properties are available to line elements.
First X Coordinate
Denotes the X-axis coordinate of the first point of the line. Corresponds to the ‘x1’ attribute defined in the SVG 1.1 specification.
Variable Name: | x1 |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
x1 | Float | First X Coordinate |
First Y Coordinate
Denotes the Y-axis coordinate of the first point of the line. Corresponds to the ‘y1’ attribute defined in the SVG 1.1 specification.
Variable Name: | y1 |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
y1 | Float | First Y Coordinate |
Second X Coordinate
Denotes the X-axis coordinate of the second point of the line. Corresponds to the ‘x2’ attribute defined in the SVG 1.1 specification.
Variable Name: | x2 |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
x2 | Float | Second X Coordinate |
Second Y Coordinate
Denotes the Y-axis coordinate of the second point of the line. Corresponds to the ‘y2’ attribute defined in the SVG 1.1 specification.
Variable Name: | y2 |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
y2 | Float | Second Y Coordinate |
Circle Element Properties
Additional properties which apply to circle elements.
Radius
Defines the extent of the circle from its center to the perimeter. Corresponds to the ‘r’ attribute defined in the SVG 1.1 specification.
Variable Name: | r |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
r | Float | Radius |
CX Coordinate
Indicates the X-coordinate of the center of the circle. Corresponds to the ‘cx’ attribute defined in the SVG 1.1 specification.
Variable Name: | cx |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
cx | Float | CX Coordinate |
CY Coordinate
Indicates the Y-coordinate of the center of the circle. Corresponds to the ‘cy’ attribute defined in the SVG 1.1 specification.
Variable Name: | cy |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
cy | Float | CY Coordinate |
Rectangle Element Properties
Additional properties that apply to rectangle elements.
X Radius
The x-axis radius of the ellipse used to round off the corners of a rounded rectangle. Corresponds to the ‘rx’ attribute defined in the SVG 1.1 specification.
Variable Name: | rx |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
rx | Float | X Radius |
Y Radius
The y-axis radius of the ellipse used to round off the corners of a rounded rectangle. Corresponds to the ‘ry’ attribute defined in the SVG 1.1 specification.
Variable Name: | ry |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
ry | Float | Y Radius |
Ellipses Element Properties
Additional properties which apply to ellipse elements.
CX Coordinate
Indicates the X-coordinate of the center of the ellipse. Corresponds to the ‘cx’ attribute defined in the SVG 1.1 specification.
Variable Name: | cx |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
cx | Float | CX Coordinate |
CY Coordinate
Indicates the Y-coordinate of the center of the ellipse. Corresponds to the ‘cy’ attribute defined in the SVG 1.1 specification.
Variable Name: | cy |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
cy | Float | CY Coordinate |
X Radius
Controls the rounding of the ellipse in relation to the X axis. Corresponds to the ‘rx’ attribute defined in the SVG 1.1 specification.
Variable Name: | rx |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
rx | Float | X Radius |
Y Radius
Controls the rounding of the ellipse in relation to the Y axis. Corresponds to the ‘ry’ attribute defined in the SVG 1.1 specification.
Variable Name: | ry |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
ry | Float | Y Radius |
Polygon and Polyline Element Properties
The following properties apply to polygon and polyline elements.
Points
A string defining the list of points that define the polygon or polyline element. Corresponds to the ‘points’ attribute defined in the SVG 1.1 specification.
Variable Name: | points |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
points | String | Points |
Path Element Properties
The following properties apply to path elements.
Path
A string defining the polygon or polyline path. Corresponds to the ‘d’ attribute defined in the SVG 1.1 specification.
Variable Name: | d |
Records: | 1 |
Record Format:
Field Name | Field Type | Field Description |
d | String | Path |
Was this page helpful?