GitHub
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 preview

Valid props

Prop nameDescriptionTypeDefault
x1Defines the x-axis coordinate of the line starting point.String, Numberundefined
x2Defines the x-axis coordinate of the line ending point.String, Numberundefined
y1Defines the y-axis coordinate of the line starting point.String, Numberundefined
y2Defines the y-axis coordinate of the line ending point.String, Numberundefined

See also Presentation Attributes

On this page