react-pdfSVGEllipse
Ellipse
The <Ellipse /> element is used to create an ellipse.
An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius.
import { Svg, Ellipse } from '@react-pdf/renderer';
const Lenses = () => (
<Svg viewBox="0 0 120 60" width={240} height={120}>
<Ellipse cx="48" cy="30" rx="34" ry="20" fill="#e82200" />
<Ellipse cx="72" cy="30" rx="34" ry="20" fill="#8d1602" opacity={0.75} />
</Svg>
);Show previewHide preview
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| cx | The x position of the ellipse. | String, Number | undefined |
| cy | The y position of the ellipse. | String, Number | undefined |
| rx | The radius of the ellipse on the x axis. | String, Number | undefined |
| ry | The radius of the ellipse on the y axis. | String, Number | undefined |
See also Presentation Attributes