react-pdfPresentation Attributes
SVG presentation attributes are CSS properties that can be used as attributes on SVG elements. This means it can be passed either inside a style object or directly by element's props.
import { Svg, Circle, Rect } from '@react-pdf/renderer';
const Attributes = () => (
<Svg viewBox="0 0 120 60" width={240} height={120}>
<Rect x="8" y="14" width="44" height="32" fill="#e82200" opacity={0.4} />
<Circle
cx="88"
cy="30"
r="20"
fill="#c9c2b6"
stroke="#8d1602"
strokeWidth={3}
strokeDasharray="6 4"
/>
</Svg>
);Show previewHide preview
Supported attributes
| Prop name | Description | Type | Default |
|---|---|---|---|
| color | Provides a potential indirect value for the fill or stroke attributes. | String | undefined |
| dominantBaseline | Defines the baseline used to align the box’s text and inline-level contents. | String | auto |
| fill | It defines the color of the inside of the graphical element it applies to. | String | undefined |
| fillOpacity | It specifies the opacity of the color or the content the current object is filled with. | String, Number | 1 |
| fillRule | It indicates how to determine what side of a path is inside a shape. | String | nonzero |
| opacity | It specifies the transparency of an object or a group of objects. | String, Number | 1 |
| stroke | Defines the color used to paint the outline of the shape. | String | undefined |
| strokeWidth | Defines the width of the stroke to be applied to the shape. | String, Number | 1 |
| strokeOpacity | Defines the opacity of the stroke of a shape. | String, Number | 1 |
| strokeLinecap | Defines the shape to be used at the end of open subpaths when they are stroked. | String | butt |
| strokeLinejoin | Defines the shape to be used at the corners of paths when they are stroked. | String | miter |
| strokeDasharray | Defines the pattern of dashes and gaps used to paint the outline of the shape. | String | undefined |
| transform | Defines a list of transform definitions that are applied to an element and the element's children. | String | undefined |
| textAnchor | Defines the horizontal alignment of a string of text. | String | undefined |
| visibility | Lets you control the visibility of graphical elements. | String | visible |
| clipPath | References a ClipPath restricting where paint is applied. | String | undefined |
| markerStart | References a Marker drawn on the first vertex of the shape. | String | undefined |
| markerMid | References a Marker drawn on every intermediate vertex of the shape. | String | undefined |
| markerEnd | References a Marker drawn on the last vertex of the shape. | String | undefined |