react-pdfLinearGradient
The <LinearGradient /> element lets authors define linear gradients that can be applied to fill or stroke of graphical elements.
import { Svg, Defs, LinearGradient, Stop, Rect } from '@react-pdf/renderer';
const Ember = () => (
<Svg viewBox="0 0 120 60" width={240} height={120}>
<Defs>
<LinearGradient id="ember" x1="0" y1="0" x2="1" y2="0">
<Stop offset="0" stopColor="#e82200" />
<Stop offset="1" stopColor="#8d1602" />
</LinearGradient>
</Defs>
<Rect x="8" y="14" width="104" height="32" rx="4" fill="url(#ember)" />
</Svg>
);Show previewHide preview
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| x1 | Defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. | String, Number | undefined |
| x2 | Defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. | String, Number | undefined |
| y1 | Defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn. | String, Number | undefined |
| y2 | Defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. | String, Number | undefined |
| xlinkHref | Reference to another gradient to inherit its stops and attributes from. | String | undefined |
| gradientTransform | Defines a transformation to be applied to the gradient. | String | undefined |
| gradientUnits | Defines the coordinate system for the gradient attributes. Valid values: "userSpaceOnUse" or "objectBoundingBox" | String | undefined |