> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`. --- components: - rx.el.svg.circle - rx.el.svg.defs - rx.el.svg.linear_gradient - rx.el.svg.polygon - rx.el.svg.path - rx.el.svg.rect - rx.el.svg.stop --- # HTML SVG Elements SVG elements are available through the `rx.el.svg` namespace. ## API Reference ### rx.el.svg.circle The SVG circle component. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. | | `auto_capitalize` | Literal["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` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. | | `context_menu` | str | - | Defines the ID of a 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` | Literal["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` | Literal["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` | Literal["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. | | `cx` | str, int | - | The x-axis coordinate of the center of the circle. | | `cy` | str, int | - | The y-axis coordinate of the center of the circle. | | `r` | str, int | - | The radius of the circle. | | `path_length` | int | - | The total length for the circle's circumference, in user units. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.el.svg.defs Display the defs element. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. | | `auto_capitalize` | Literal["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` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. | | `context_menu` | str | - | Defines the ID of a 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` | Literal["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` | Literal["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` | Literal["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. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.el.svg.linear_gradient Display the linearGradient element. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. | | `auto_capitalize` | Literal["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` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. | | `context_menu` | str | - | Defines the ID of a 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` | Literal["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` | Literal["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` | Literal["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. | | `gradient_units` | str, bool | - | Units for the gradient. | | `gradient_transform` | str, bool | - | Transform applied to the gradient. | | `spread_method` | str, bool | - | Method used to spread the gradient. | | `href` | str | - | Reference to another gradient to inherit from. | | `x1` | str, int, float | - | X coordinate of the starting point of the gradient. | | `x2` | str, int, float | - | X coordinate of the ending point of the gradient. | | `y1` | str, int, float | - | Y coordinate of the starting point of the gradient. | | `y2` | str, int, float | - | Y coordinate of the ending point of the gradient. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.el.svg.polygon The SVG polygon component. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. | | `auto_capitalize` | Literal["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` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. | | `context_menu` | str | - | Defines the ID of a 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` | Literal["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` | Literal["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` | Literal["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. | | `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. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.el.svg.path Display the path element. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. | | `auto_capitalize` | Literal["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` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. | | `context_menu` | str | - | Defines the ID of a 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` | Literal["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` | Literal["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` | Literal["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. | | `d` | str, int, float | - | Defines the shape of the path. | | `path_length` | int | - | The total path length, in user units. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.el.svg.rect The SVG rect component. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. | | `auto_capitalize` | Literal["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` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. | | `context_menu` | str | - | Defines the ID of a 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` | Literal["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` | Literal["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` | Literal["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. | | `x` | str, int | - | The x coordinate of the rect. | | `y` | str, int | - | The y coordinate of the rect. | | `width` | str, int | - | The width of the rect. | | `height` | str, int | - | The height of the rect. | | `rx` | str, int | `ry if it is specified` | The horizontal corner radius of the rect. | | `ry` | str, int | `rx if it is specified` | The vertical corner radius of the rect. | | `path_length` | int | - | The total length of the rectangle's perimeter, in user units. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/ ### rx.el.svg.stop Display the stop element. #### Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `access_key` | str | - | Provides a hint for generating a keyboard shortcut for the current element. | | `auto_capitalize` | Literal["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` | Literal["inherit", "plaintext-only"], bool | - | Indicates whether the element's content is editable. | | `context_menu` | str | - | Defines the ID of a 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` | Literal["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` | Literal["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` | Literal["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. | | `offset` | str, int, float | - | Offset of the gradient stop. | | `stop_color` | str, Color, bool | - | Color of the gradient stop. | | `stop_opacity` | str, float, int, bool | - | Opacity of the gradient stop. | #### Event Triggers Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/