[Bug] SVG image not displayed inside canvas with Firefox

[Georges67]

Version

5.1.2

Link to Minimal Reproduction

No response

Steps to Reproduce

Create a chart with data as follow:

    {
      "value": 28,
      "originalValue": 528,
      "label": {
        "show": true,
        "width": 25,
        "height": 25,
        "color": "transparent",
        "backgroundColor": {
          "image": "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" id=\"mobile\" viewBox=\"0 0 24 24\" fill=\"white\"><path fill=\"rgba(180,248,196,0)\" d=\"M127 256h24v24h-24z\" transform=\"translate(-127 -256)\"/><path data-name=\"phone_pro\" d=\"M142.5 257h-8a2.5 2.5 0 00-2.5 2.5v17a2.5 2.5 0 002.5 2.5h8a2.5 2.5 0 002.5-2.5v-17a2.5 2.5 0 00-2.5-2.5zm-4 21a1.5 1.5 0 111.5-1.5 1.5 1.5 0 01-1.5 1.5zm4.5-4h-9v-14h9z\" transform=\"translate(-127 -256)\"/></svg>"
        }
      }
    }

The SVG inside backgroundColor -> image is not displayed on firefox whereas it works well on chrome.

If we configur SVG mode instead of canvas mode it also works.

Current Behavior

SVG is missing in firefox

Expected Behavior

SVG should be visible

Environment

- OS: ALL
- Browser: Firefox
- Framework: angular

Any additional comments?

No response

[leonardofficial]

Experiencing similar issues with adding a graphic to a multiseries chart:

graphic: [
          {
            type: 'image',
            id: 'logo',
            right: 'center',
            top: 'center',
            z: 1,
            style: {
              image: '/logo-wide.svg',
              width: 128,
              height: 64,
              opacity: 0.4,
            },
          },
        ] 

This will work fine on Chrome and Safari, but not show up in firefox

[stephanbehm]

I experience a possible related bug using echarts inside an ui5-webcomponents (https://sap.github.io/ui5-webcomponents/playground/components/Dialog/)

Chrome works fine, Firefox does not render the graph inside the dialog. Firefox does render it, if I use it in a

.

EDIT: I used the CanvasRenderer and now switched to the SVGRenderer - now it works across both browsers as expected. Imho this looks like a bug in the CanvasRenderer in Firefox.

[Powersource]

still getting this issue. svgrenderer wasn't an option because that had other issues