Import it from @grafloria/renderer.
VNode properties supporting SVG attributes, styles, and event handlers
tsinterface VNodeProps
Properties
| Name | Type | Default | Description |
|---|---|---|---|
x? | number | X coordinate | |
y? | number | Y coordinate | |
width? | number | Width | |
height? | number | Height | |
rx? | number | Border radius X (rounded corners) | |
ry? | number | Border radius Y (rounded corners) | |
cx? | number | Circle center X | |
cy? | number | Circle center Y | |
r? | number | Circle radius | |
x1? | number | Line start X | |
y1? | number | Line start Y | |
x2? | number | Line end X | |
y2? | number | Line end Y | |
d? | string | SVG path data (d attribute) | |
fill? | string | Fill color | |
stroke? | string | Stroke color | |
strokeWidth? | number | Stroke width | |
strokeDasharray? | string | Stroke dash array (dashed lines) | |
opacity? | number | Opacity (0-1) | |
transform? | string | SVG transform attribute | |
textContent? | string | Text content | |
fontSize? | number | Font size (in pixels) | |
fontFamily? | string | Font family | |
textAnchor? | 'start' | 'middle' | 'end' | Text anchor (alignment) | |
className? | string | CSS class names (space-separated) | |
containerId? | string | Container ID for foreignObject elements Used by ComponentRenderer to target the specific foreignObject for Angular component injection | |
requiredExtensions? | string | SVG foreignObject requiredExtensions attribute Specifies SVG extensions required for rendering | |
xmlns? | string | XML namespace (typically for XHTML in foreignObject) Example: 'http://www.w3.org/1999/xhtml' | |
style? | Record<string, any> | string | Inline style: either a declaration map, or a raw CSS string. | |
onClick? | (e: Event) => void | Click event handler | |
onMouseEnter? | (e: Event) => void | Mouse enter event handler | |
onMouseLeave? | (e: Event) => void | Mouse leave event handler | |
onMouseDown? | (e: Event) => void | Mouse down event handler |
Was this page helpful?