@visx/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 @visx/clip-path

APIs

#<ClipPath />

# idstringrequired

Unique id for the clipPath.

# childrenReactNode

clipPath children.

#<CircleClipPath />

# idstringrequired

Unique id for the clipPath.

# cxstring | number | undefined

x position of the center of the ClipPath circle.

# cystring | number | undefined

y position of the center of the ClipPath circle.

# rstring | number | undefined

radius of the ClipPath circle.

#<RectClipPath />

# idstringrequired

Unique id for the clipPath.

# heightstring | number | undefined

height of the ClipPath rect.

Default 1

# widthstring | number | undefined

width of the ClipPath rect.

Default 1

# xstring | number | undefined

x position of the ClipPath rect.

Default 0

# ystring | number | undefined

y position of the ClipPath rect.

Default 0