HTML SVG Elements
SVG elements are available through the rx.el.svg namespace.
API Reference
Shared HTML props
Components linked to this section accept these HTML props. Component-specific additions and overrides are listed below.
Props
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
rx.el.svg.circle
The SVG circle component.
Props
| Prop | Type | Description |
|---|---|---|
cx | Union[str, int] | The x-axis coordinate of the center of the circle. |
cy | Union[str, int] | The y-axis coordinate of the center of the circle. |
r | Union[str, int] | The radius of the circle. |
path_length | int | The total length for the circle's circumference, in user units. |
Also accepts the shared HTML props.
Event Triggers
See the full list of default event triggers
rx.el.svg.defs
Display the defs element.
Props
No component specific props
Also accepts the shared HTML props.
Event Triggers
See the full list of default event triggers
rx.el.svg.linear_gradient
Display the linearGradient element.
Props
| Prop | Type | Description |
|---|---|---|
gradient_units | Union[str, bool] | Units for the gradient. |
gradient_transform | Union[str, bool] | Transform applied to the gradient. |
spread_method | Union[str, bool] | Method used to spread the gradient. |
href | str | Reference to another gradient to inherit from. |
x1 | Union[str, int, float] | X coordinate of the starting point of the gradient. |
x2 | Union[str, int, float] | X coordinate of the ending point of the gradient. |
y1 | Union[str, int, float] | Y coordinate of the starting point of the gradient. |
y2 | Union[str, int, float] | Y coordinate of the ending point of the gradient. |
Also accepts the shared HTML props.
Event Triggers
See the full list of default event triggers
rx.el.svg.polygon
The SVG polygon component.
Props
| Prop | Type | Description |
|---|---|---|
points | str | defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon. |
path_length | int | This prop lets specify the total length for the path, in user units. |
Also accepts the shared HTML props.
Event Triggers
See the full list of default event triggers
rx.el.svg.path
Display the path element.
Props
| Prop | Type | Description |
|---|---|---|
d | Union[str, int, float] | Defines the shape of the path. |
path_length | int | The total path length, in user units. |
Also accepts the shared HTML props.
Event Triggers
See the full list of default event triggers
rx.el.svg.rect
The SVG rect component.
Props
| Prop | Type | Description |
|---|---|---|
x | Union[str, int] | The x coordinate of the rect. |
y | Union[str, int] | The y coordinate of the rect. |
width | Union[str, int] | The width of the rect. |
height | Union[str, int] | The height of the rect. |
rx | Union[str, int] | The horizontal corner radius of the rect. |
ry | Union[str, int] | The vertical corner radius of the rect. |
path_length | int | The total length of the rectangle's perimeter, in user units. |
Also accepts the shared HTML props.
Event Triggers
See the full list of default event triggers
rx.el.svg.stop
Display the stop element.
Props
| Prop | Type | Description |
|---|---|---|
offset | Union[str, int, float] | Offset of the gradient stop. |
stop_color | Union[str, Color, bool] | Color of the gradient stop. |
stop_opacity | Union[str, float, int, bool] | Opacity of the gradient stop. |
Also accepts the shared HTML props.