@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

<ClipPath />
<CircleClipPath />
<RectClipPath />

APIs

#<ClipPath />

# ClipPath.idstringrequired

Unique id for the clipPath.

# ClipPath.childrenReactNodeoptional

clipPath children.

#<CircleClipPath />

# CircleClipPath.idstringrequired

Unique id for the clipPath.

# CircleClipPath.cxstring | number | undefinedoptional

x position of the center of the ClipPath circle.

# CircleClipPath.cystring | number | undefinedoptional

y position of the center of the ClipPath circle.

# CircleClipPath.rstring | number | undefinedoptional

radius of the ClipPath circle.

#<RectClipPath />

# RectClipPath.idstringrequired

Unique id for the clipPath.

# RectClipPath.heightstring | number | undefinedoptional

height of the ClipPath rect.

Default 1

# RectClipPath.widthstring | number | undefinedoptional

width of the ClipPath rect.

Default 1

# RectClipPath.xstring | number | undefinedoptional

x position of the ClipPath rect.

Default 0

# RectClipPath.ystring | number | undefinedoptional

y position of the ClipPath rect.

Default 0