HTMLAttributes -> SVGAttributes, add edge example

examples/react/src/examples/Edges/CustomEdge3.css

@@ -0,0 +1,14 @@
+@keyframes react-flow-edge-dash {
+  from {
+    stroke-dashoffset: 100;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.react-flow__edge-custom3 {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: react-flow-edge-dash 1s linear forwards;
+}

examples/react/src/examples/Edges/CustomEdge3.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { BaseEdge, EdgeProps, EdgeText, getSmoothStepPath } from '@xyflow/react';
+import './CustomEdge3.css';
+
+const CustomEdge: FC<EdgeProps> = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+}) => {
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <>
+      <BaseEdge id={id} path={edgePath} pathLength={100} />
+      <EdgeText
+        x={labelX}
+        y={labelY - 5}
+        label={data.text}
+        labelBgStyle={{ fill: 'transparent' }}
+        onClick={() => console.log(data)}
+      />
+    </>
+  );
+};
+
+export default CustomEdge;

examples/react/src/examples/Edges/index.tsx

@@ -16,6 +16,7 @@ import {
 
 import CustomEdge from './CustomEdge';
 import CustomEdge2 from './CustomEdge2';
+import CustomEdge3 from './CustomEdge3';
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
@@ -63,6 +64,12 @@ const initialNodes: Node[] = [
     data: { label: 'Output 9' },
     position: { x: 675, y: 500 },
   },
+  {
+    id: '10',
+    type: 'output',
+    data: { label: 'Output 10' },
+    position: { x: 50, y: 400 },
+  },
 ];
 
 const initialEdges: Edge[] = [
@@ -137,6 +144,13 @@ const initialEdges: Edge[] = [
     type: 'custom2',
     data: { text: 'custom edge 2' },
   },
+  {
+    id: 'e3a-10',
+    source: '3a',
+    target: '10',
+    type: 'custom3',
+    data: { text: 'custom edge 3' },
+  },
   {
     id: 'e5-6',
     source: '5',
@@ -173,6 +187,7 @@ const initialEdges: Edge[] = [
 const edgeTypes: EdgeTypes = {
   custom: CustomEdge,
   custom2: CustomEdge2,
+  custom3: CustomEdge3,
 };
 
 const defaultEdgeOptions = {