ClipRect
import { ClipRect } from 'cx/svg'; Copied The ClipRect component clips its inner contents to its bounded object 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}.
<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 for details. |
offset | string/number | Translate edges in pixels. Format: "t r b l". See Svg for details. |
margin | string/number | CSS-like margin. See Svg for details. |
padding | string/number | Padding applied before passing bounds to children. |