EdgeArrowMarker.tsx 635 B

123456789101112131415161718192021222324
  1. import React from 'react';
  2. /**
  3. * In SVG you need to supply this kind of marker that can be then referenced from a line segment as an ending of the
  4. * line turning in into arrow. Needs to be included in the svg element and then referenced as markerEnd="url(#triangle)"
  5. */
  6. export function EdgeArrowMarker() {
  7. return (
  8. <defs>
  9. <marker
  10. id="triangle"
  11. viewBox="0 0 10 10"
  12. refX="8"
  13. refY="5"
  14. markerUnits="strokeWidth"
  15. markerWidth="10"
  16. markerHeight="10"
  17. orient="auto"
  18. >
  19. <path d="M 0 0 L 10 5 L 0 10 z" fill="#999" />
  20. </marker>
  21. </defs>
  22. );
  23. }