# ClipRect

```ts
import { ClipRect } from 'cx/svg';
```

The `ClipRect` component clips its inner contents to its [bounded object](./svg#bounded-objects) area. Any content that extends beyond the clip rectangle will be hidden.

In this example, the ellipse has a negative margin causing it to extend beyond the container, but the `ClipRect` clips it to a smaller area defined by `margin={15}`.

```tsx
import { Svg, ClipRect, Ellipse } from "cx/svg";

export default (
  <Svg style="width: 200px; height: 200px; border: 1px dashed #ddd">
    <ClipRect margin={15}>
      <Ellipse margin={-10} fill="red" />
    </ClipRect>
  </Svg>
);

```

## Configuration

| Property  | Type            | Description                                                                       |
| --------- | --------------- | --------------------------------------------------------------------------------- |
| `anchors` | `string/number` | Position within parent bounds. Format: `"t r b l"`. See [Svg](./svg) for details. |
| `offset`  | `string/number` | Translate edges in pixels. Format: `"t r b l"`. See [Svg](./svg) for details.     |
| `margin`  | `string/number` | CSS-like margin. See [Svg](./svg) for details.                                    |
| `padding` | `string/number` | Padding applied before passing bounds to children.                                |