From f2bbdba33ae82b42c0d227827f41e832844d31b2 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 18 Aug 2025 12:44:49 +0200
Subject: [PATCH 1/3] Fix open arrow marker using fill color from edge instead
 of none

---
 examples/react/src/examples/Edges/index.tsx              | 2 +-
 examples/svelte/src/routes/examples/edges/+page.svelte   | 2 +-
 .../react/src/container/EdgeRenderer/MarkerSymbols.tsx   | 2 +-
 .../EdgeRenderer/MarkerDefinition/Marker.svelte          | 9 ++++-----
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/examples/react/src/examples/Edges/index.tsx b/examples/react/src/examples/Edges/index.tsx
index c4f9fb69..04bb88ae 100644
--- a/examples/react/src/examples/Edges/index.tsx
+++ b/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,
diff --git a/examples/svelte/src/routes/examples/edges/+page.svelte b/examples/svelte/src/routes/examples/edges/+page.svelte
index 17d46823..c2d8d642 100644
--- a/examples/svelte/src/routes/examples/edges/+page.svelte
+++ b/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
diff --git a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
index 089cda47..3f44abc3 100644
--- a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
+++ b/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" />;
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
index d032ee35..cfba1bac 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
+++ b/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}

From 2e7c89c6c3379030391b842263b06ef36f7e8945 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 18 Aug 2025 14:20:19 +0200
Subject: [PATCH 2/3] changeset

---
 .changeset/gold-maps-sing.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/gold-maps-sing.md

diff --git a/.changeset/gold-maps-sing.md b/.changeset/gold-maps-sing.md
new file mode 100644
index 00000000..0af27847
--- /dev/null
+++ b/.changeset/gold-maps-sing.md
@@ -0,0 +1,6 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+---
+
+Fix open arrow marker using fill color from edge instead of none

From b4a8936009e11cd018d85350c321bc328786cd44 Mon Sep 17 00:00:00 2001
From: Alessandro <a@a.a>
Date: Mon, 18 Aug 2025 15:34:09 +0200
Subject: [PATCH 3/3] restore attribute

---
 .../container/EdgeRenderer/MarkerSymbols.tsx  | 23 ++++++++++++++++---
 .../MarkerDefinition/Marker.svelte            |  5 ++--
 packages/system/src/styles/init.css           |  5 +++-
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
index 3f44abc3..7068d840 100644
--- a/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
+++ b/packages/react/src/container/EdgeRenderer/MarkerSymbols.tsx
@@ -8,10 +8,19 @@ type SymbolProps = Omit<EdgeMarker, 'type'>;
 const ArrowSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
   const style = {
     strokeWidth,
-    ...(color && { stroke: color, fill: 'none' }),
+    ...(color && { stroke: color }),
   };
 
-  return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" fill="none" points="-5,-4 0,0 -5,4" />;
+  return (
+    <polyline
+      className="arrow"
+      style={style}
+      strokeLinecap="round"
+      fill="none"
+      strokeLinejoin="round"
+      points="-5,-4 0,0 -5,4"
+    />
+  );
 };
 
 const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) => {
@@ -20,7 +29,15 @@ const ArrowClosedSymbol = ({ color = 'none', strokeWidth = 1 }: SymbolProps) =>
     ...(color && { stroke: color, fill: color }),
   };
 
-  return <polyline style={style} strokeLinecap="round" strokeLinejoin="round" points="-5,-4 0,0 -5,4 -5,-4" />;
+  return (
+    <polyline
+      className="arrowclosed"
+      style={style}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      points="-5,-4 0,0 -5,4 -5,-4"
+    />
+  );
 };
 
 export const MarkerSymbols = {
diff --git a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
index cfba1bac..aeb76684 100644
--- a/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
+++ b/packages/svelte/src/lib/container/EdgeRenderer/MarkerDefinition/Marker.svelte
@@ -26,16 +26,17 @@
 >
   {#if type === MarkerType.Arrow}
     <polyline
+      class="arrow"
       style:stroke={color}
-      style:fill={'none'}
+      fill="none"
       stroke-linecap="round"
       stroke-linejoin="round"
       stroke-width={strokeWidth}
-      fill="none"
       points="-5,-4 0,0 -5,4"
     />
   {:else if type === MarkerType.ArrowClosed}
     <polyline
+      class="arrowclosed"
       style:stroke={color}
       style:fill={color}
       stroke-linecap="round"
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index b1a7d14b..cb364e6e 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -168,10 +168,13 @@
 
 /* Arrowhead marker styles - use CSS custom properties as default */
 .xy-flow__arrowhead polyline {
-  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
   stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
 }
 
+.xy-flow__arrowhead polyline.arrowclosed {
+  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
+}
+
 .xy-flow__connection {
   pointer-events: none;