From 954f869e61609058aa2370c604ba0b10b71acb8b Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Tue, 16 Apr 2024 11:34:17 -0400
Subject: [PATCH] [v11.0.x] Canvas: Fix SVG items background glitch (#86366)

---
 public/app/features/canvas/elements/cloud.tsx         | 9 ++++++++-
 public/app/features/canvas/elements/ellipse.tsx       | 9 ++++++++-
 public/app/features/canvas/elements/parallelogram.tsx | 9 ++++++++-
 public/app/features/canvas/elements/triangle.tsx      | 9 ++++++++-
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/public/app/features/canvas/elements/cloud.tsx b/public/app/features/canvas/elements/cloud.tsx
index 735bcfc94ff..1b9117d3409 100644
--- a/public/app/features/canvas/elements/cloud.tsx
+++ b/public/app/features/canvas/elements/cloud.tsx
@@ -43,7 +43,14 @@ const Cloud = (props: CanvasElementProps<CanvasElementConfig, CanvasElementData>
           </clipPath>
         </defs>
         {/* Apply background image within the clipping area */}
-        <rect x="0" y="0" width="100%" height="100%" clipPath={`url(#cloudClip-${uniqueId})`} />
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          clipPath={`url(#cloudClip-${uniqueId})`}
+          style={{ fill: 'none' }}
+        />
         <path
           d="M 23 13 C -1 13 -7 33 12.2 37 C -7 45.8 14.6 65 30.2 57 C 41 73 77 73 89 57 C 113 57 113 41 98 33 C 113 17 89 1 68 9 C 53 -3 29 -3 23 13 Z"
           className={styles.element}
diff --git a/public/app/features/canvas/elements/ellipse.tsx b/public/app/features/canvas/elements/ellipse.tsx
index 60cd9513833..c3e8cd3413d 100644
--- a/public/app/features/canvas/elements/ellipse.tsx
+++ b/public/app/features/canvas/elements/ellipse.tsx
@@ -43,7 +43,14 @@ const Ellipse = (props: CanvasElementProps<CanvasElementConfig, CanvasElementDat
           </clipPath>
         </defs>
         {/* Apply background image within the clipping area */}
-        <rect x="0" y="0" width="100%" height="100%" clipPath={`url(#ellipseClip-${uniqueId})`} />
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          clipPath={`url(#ellipseClip-${uniqueId})`}
+          style={{ fill: 'none' }}
+        />
         <ellipse
           cx="50%"
           cy="50%"
diff --git a/public/app/features/canvas/elements/parallelogram.tsx b/public/app/features/canvas/elements/parallelogram.tsx
index 3c52ec5b3d6..c02c081dc34 100644
--- a/public/app/features/canvas/elements/parallelogram.tsx
+++ b/public/app/features/canvas/elements/parallelogram.tsx
@@ -43,7 +43,14 @@ const Parallelogram = (props: CanvasElementProps<CanvasElementConfig, CanvasElem
           </clipPath>
         </defs>
         {/* Apply background image within the clipping area */}
-        <rect x="0" y="0" width="100%" height="100%" clipPath={`url(#parallelogramClip-${uniqueId})`} />
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          clipPath={`url(#parallelogramClip-${uniqueId})`}
+          style={{ fill: 'none' }}
+        />
         <polygon
           points="0,150 50,0 250,0 200,150"
           className={styles.element}
diff --git a/public/app/features/canvas/elements/triangle.tsx b/public/app/features/canvas/elements/triangle.tsx
index ef3dc94da2f..d146a1adec0 100644
--- a/public/app/features/canvas/elements/triangle.tsx
+++ b/public/app/features/canvas/elements/triangle.tsx
@@ -43,7 +43,14 @@ const Triangle = (props: CanvasElementProps<CanvasElementConfig, CanvasElementDa
           </clipPath>
         </defs>
         {/* Apply background image within the clipping area */}
-        <rect x="0" y="0" width="100%" height="100%" clipPath={`url(#triangleClip-${uniqueId})`} />
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          clipPath={`url(#triangleClip-${uniqueId})`}
+          style={{ fill: 'none' }}
+        />
         <polygon
           points="100,0 200,200 0,200"
           className={styles.element}