# VNodeProps

Import it from `@grafloria/renderer`.

VNode properties supporting SVG attributes, styles, and event handlers

```ts
interface 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 |