SVGLine
Line
The <Line /> element is used to create a line.
import { Svg, Line } from '@react-pdf/renderer';
const Rules = () => (
<Svg viewBox="0 0 120 60" width={240} height={120}>
<Line x1="8" y1="16" x2="112" y2="16" stroke="#c9c2b6" strokeWidth={3} />
<Line x1="8" y1="30" x2="112" y2="30" stroke="#c9c2b6" strokeWidth={3} />
<Line x1="8" y1="44" x2="68" y2="44" stroke="#e82200" strokeWidth={3} />
</Svg>
);Show previewHide preview
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| x1 | Defines the x-axis coordinate of the line starting point. | String, Number | undefined |
| x2 | Defines the x-axis coordinate of the line ending point. | String, Number | undefined |
| y1 | Defines the y-axis coordinate of the line starting point. | String, Number | undefined |
| y2 | Defines the y-axis coordinate of the line ending point. | String, Number | undefined |
See also Presentation Attributes