Fix open arrow marker using fill color from edge instead of none

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

@@ -267,7 +267,7 @@ const edgeTypes: EdgeTypes = {
 
 const defaultEdgeOptions = {
   markerEnd: {
-    type: MarkerType.ArrowClosed,
+    type: MarkerType.Arrow,
     color: 'red',
     width: 20,
     height: 20,

examples/svelte/src/routes/examples/edges/+page.svelte

@@ -216,7 +216,7 @@
 
 	const defaultEdgeOptions = {
 		markerEnd: {
-			type: MarkerType.ArrowClosed,
+			type: MarkerType.Arrow,
 			color: 'red',
 			width: 20,
 			height: 20

packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx

@@ -8,7 +8,7 @@ type SymbolProps = Omit<EdgeMarker, 'type'>;
 const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   const style = {
     strokeWidth,
-    ...(color && { stroke: color }),
+    ...(color && { stroke: color, fill: 'none' }),
   };
 
   return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" fill="none" points="-5,-4 0,0 -5,4" />;

packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte

@@ -11,9 +11,6 @@
     color = 'none',
     strokeWidth
   }: MarkerProps = $props();
-
-  // Create inline styles when explicit color is provided
-  const polylineStyle = color ? `stroke: ${color}; fill: ${color};` : '';
 </script>
 
 <marker
@@ -29,7 +26,8 @@
 >
   {#if type === MarkerType.Arrow}
     <polyline
-      style={polylineStyle}
+      style:stroke={color}
+      style:fill={'none'}
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width={strokeWidth}
@@ -38,7 +36,8 @@
     />
   {:else if type === MarkerType.ArrowClosed}
     <polyline
-      style={polylineStyle}
+      style:stroke={color}
+      style:fill={color}
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width={strokeWidth}