Marker

The <Marker /> element defines a graphic drawn on the vertices of a <Line />, <Polyline />, <Polygon /> or <Path />, typically an arrowhead or a data point.

Declare it inside a <Defs /> element and reference it from the shape through the markerStart, markerMid and markerEnd attributes, which paint it on the first vertex, every intermediate vertex and the last vertex respectively.

import {
  Svg,
  Defs,
  Marker,
  Path,
  Circle,
  Line,
  Polyline,
} from '@react-pdf/renderer';

const Flow = () => (
  <Svg viewBox="0 0 120 60" width={240} height={120}>
    <Defs>
      <Marker
        id="arrow"
        viewBox="0 0 10 10"
        refX={9}
        refY={5}
        markerWidth={6}
        markerHeight={6}
        orient="auto"
      >
        <Path d="M 0 0 L 10 5 L 0 10 z" fill="#e82200" />
      </Marker>
      <Marker
        id="dot"
        viewBox="0 0 10 10"
        refX={5}
        refY={5}
        markerWidth={4}
        markerHeight={4}
      >
        <Circle cx="5" cy="5" r="5" fill="#8d1602" />
      </Marker>
    </Defs>
    <Line
      x1="8"
      y1="16"
      x2="104"
      y2="16"
      stroke="#e82200"
      strokeWidth={2}
      markerEnd="url(#arrow)"
    />
    <Polyline
      points="8,48 36,32 64,44 92,26"
      fill="none"
      stroke="#c9c2b6"
      strokeWidth={2}
      markerStart="url(#dot)"
      markerMid="url(#dot)"
      markerEnd="url(#dot)"
    />
  </Svg>
);

Show preview

Valid props

Prop name	Description	Type	Default
id	Unique identifier used to reference the marker from a shape.	String	undefined
viewBox	Defines the coordinate system of the marker contents, as `"minX minY maxX maxY"`.	String	undefined
markerWidth	Width of the marker viewport. Only applied when `viewBox` is present.	String, Number	3
markerHeight	Height of the marker viewport. Only applied when `viewBox` is present.	String, Number	3
refX	Position of the marker point on its x-axis, aligned to the vertex.	String, Number	0
refY	Position of the marker point on its y-axis, aligned to the vertex.	String, Number	0
orient	Rotation applied to the marker. `auto` follows the direction of the shape, `auto-start-reverse` also flips the start marker, and a number sets a fixed angle in degrees.	String, Number	0
markerUnits	Coordinate system for the marker. `strokeWidth` scales it with the shape's `strokeWidth`, `userSpaceOnUse` keeps its size constant.	String	strokeWidth

Valid props

On this page