[v11.0.x] Canvas: Fix SVG items background glitch (#86366)

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}

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%"

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}

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}