custom-edge-linear-gradient-render.tsx 902 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. type CustomEdgeLinearGradientRenderProps = {
  2. id: string
  3. startColor: string
  4. stopColor: string
  5. position: {
  6. x1: number
  7. x2: number
  8. y1: number
  9. y2: number
  10. }
  11. }
  12. const CustomEdgeLinearGradientRender = ({
  13. id,
  14. startColor,
  15. stopColor,
  16. position,
  17. }: CustomEdgeLinearGradientRenderProps) => {
  18. const {
  19. x1,
  20. x2,
  21. y1,
  22. y2,
  23. } = position
  24. return (
  25. <defs>
  26. <linearGradient
  27. id={id}
  28. gradientUnits='userSpaceOnUse'
  29. x1={x1}
  30. y1={y1}
  31. x2={x2}
  32. y2={y2}
  33. >
  34. <stop
  35. offset='0%'
  36. style={{
  37. stopColor: startColor,
  38. stopOpacity: 1,
  39. }}
  40. />
  41. <stop
  42. offset='100%'
  43. style={{
  44. stopColor,
  45. stopOpacity: 1,
  46. }}
  47. />
  48. </linearGradient>
  49. </defs>
  50. )
  51. }
  52. export default CustomEdgeLinearGradientRender