react-pdfRadialGradient
The <RadialGradient /> element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
import { Svg, Defs, RadialGradient, Stop, Rect } from '@react-pdf/renderer';
const Glow = () => (
<Svg viewBox="0 0 120 60" width={240} height={120}>
<Defs>
<RadialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
<Stop offset="0" stopColor="#e82200" />
<Stop offset="1" stopColor="#8d1602" />
</RadialGradient>
</Defs>
<Rect x="8" y="14" width="104" height="32" rx="4" fill="url(#glow)" />
</Svg>
);Show previewHide preview
Valid props
| Prop name | Description | Type | Default |
|---|---|---|---|
| cx | Defines the x coordinate of the end circle of the radial gradient. | String, Number | undefined |
| cy | Defines the y coordinate of the end circle of the radial gradient. | String, Number | undefined |
| r | Defines the radius of the end circle of the radial gradient. | String, Number | undefined |
| fr | Defines the radius of the start circle of the radial gradient. The gradient will be drawn such that the 0% <Stop> is mapped to the perimeter of the start circle. | String, Number | undefined |
| fx | Defines the x coordinate of the start circle of the radial gradient. | String, Number | undefined |
| fy | Defines the y coordinate of the start circle of the radial gradient. | 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 |