Version

5.5.1

Link to Minimal Reproduction

https://codepen.io/Srikanth-Sangana/pen/ZEZQyMd

Steps to Reproduce

1. Define a chart option with a background image using an SVG base64 data URI.
2. Render the chart using the canvas renderer and confirm the background image displays correctly.
3. Change the renderer to svg by setting { renderer: 'svg' } during chart initialization.
4. Render the chart again and observe that the background image does not appear in SVG mode.

The E-chart options are below:
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'svg',
useDirtyRect: false
});
var app = {};

var option;

const base64ImageUpArrow = 'data:png;base64,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';
var labelFormatters =['{{title|$61,18M} (-37,31M {upArrow|})', '$23,87M (-0,00M {upArrow|})', '$3,32M (20,55M {upArrow|})']

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150],
type: 'bar',
label: {
show: true,
fontSize: 10,
position: 'outside',
"formatter": (params) =>{
return ${labelFormatters[params.dataIndex]} ;
},
rich: {
upArrow: {
height: 15,
align: 'center',
backgroundColor: {
image: base64ImageUpArrow // Path to your icon
}
},
}
}
}
]
};

if (option && typeof option === 'object') {
myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

Current Behavior

When rendering an ECharts chart with a background image set using an SVG base64 data URI:

• The background image renders correctly when using the canvas renderer.
• The background image does not render when switching to the SVG renderer, leaving the background empty

Expected Behavior

The background image set using an SVG base64 data URI should render correctly in both canvas and SVG rendering modes.

Environment

- OS:Windows
- Browser:Chrome
- Framework:

Any additional comments?

No response