Polygon

The <Polygon /> element is used to create a graphic that contains at least three sides.

Polygons are made of straight lines, and the shape is "closed" (all the lines connect up).

import { Svg, Polygon } from '@react-pdf/renderer';

const Area = () => (
  <Svg viewBox="0 0 120 60" width={240} height={120}>
    <Polygon
      points="8,46 28,34 48,38 68,20 88,26 112,10 112,52 8,52"
      fill="#e82200"
      stroke="#8d1602"
      strokeWidth={2}
    />
  </Svg>
);

Show preview

Valid props

Prop name	Description	Type	Default
points	This attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon	String	undefined

Valid props

On this page