@vx/clip-path

React utilities for defining <clipPath> SVG elements, with or without data, to be clip masks for other SVG elements by using their clip-path property.

Installation

npm install --save @vx/clip-path

Components

APIs

#<ClipPath />

# ClipPath.idstringrequired

Unique id for the clipPath.

# ClipPath.childrenReactNodeoptional

clipPath children.

#<CircleClipPath />

# CircleClipPath.idstringrequired

Unique id for the clipPath.

# CircleClipPath.cxReactTextoptional

x position of the center of the ClipPath circle.

# CircleClipPath.cyReactTextoptional

y position of the center of the ClipPath circle.

# CircleClipPath.rReactTextoptional

radius of the ClipPath circle.

#<RectClipPath />

# RectClipPath.idstringrequired

Unique id for the clipPath.

# RectClipPath.heightReactTextoptional

height of the ClipPath rect.

Default 1

# RectClipPath.widthReactTextoptional

width of the ClipPath rect.

Default 1

# RectClipPath.xReactTextoptional

x position of the ClipPath rect.

Default 0

# RectClipPath.yReactTextoptional

y position of the ClipPath rect.

Default 0