fix: Add SVG decal backgroundColor support

[Srajan-Sanjay-Saxena]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Fixes the issue where decal background color was not applied when the rendering mode was set to SVG.

Fixed issues

• [Bug] decal backgroundColor not work when echarts.init render svg #21333

Details

Before: What was the problem?

When rendering charts in SVG mode, the decal background color was not visible.
This occurred because the existing code only handled the Canvas rendering case and did not include logic for SVG rendering.

After: How does it behave after the fixing?

The decal background color now correctly appears when charts are rendered in SVG mode.
A separate code path was introduced to handle the non-canvas (SVG) case, utilizing the pattern sizes to generate appropriate SVG dimensions for decal rendering.

Two new test files have been added inside:

test/decal_bg_svg_testing/

to validate the fix in SVG rendering scenarios.

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

Security Checking

• This PR uses security-sensitive Web APIs.

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

Two new test cases added in test/decal_bg_svg_testing/.

Merging options

• Please squash the commits into a single one when merging.

Other information

This fix ensures parity between Canvas and SVG rendering modes regarding decal background color rendering.

2025-11-03.16-09-34.mp4

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

[github-actions]

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-21337@0c09b6b

[Ovilia]

The result of bar-chart-decal-test running with canvas and svg are not the same. Is this expected? I believe the canvas result is correct.

Please don't create a directory for related tests. You can put them in a single file called decal-backgroundColor.html.

[Ovilia]

/dist should be uploaded when a new version release, so please revert this change.

[Srajan-Sanjay-Saxena]

recitfied in 1b15177

[Ovilia]

Please don't upload the changes of package-lock.json.

[Srajan-Sanjay-Saxena]

The result of bar-chart-decal-test running with canvas and svg are not the same. Is this expected? I believe the canvas result is correct.

Please don't create a directory for related tests. You can put them in a single file called decal-backgroundColor.html.

there is one serious issue i found

look carefully at the image ... you will find out that the series2 in the bar charts which are the smaller bars are rendered wrongly in svg mode .. the full rendering is shown here .. when the bg is setted to transparent there is an issue with decal

@Ovilia assign this task to me i am working on it .... so this is a different issue , i guess we should raise a different ticket because currently the issue was only regarding the bg color although canvas mode is working extremely fine . I reckon that there are some changes that need to be made in zrender .
I am also attaching the canvas test for the same as a reference

[Srajan-Sanjay-Saxena]

@Ovilia There is one very interesting thing i found out when i ran the testcase 'test/decal-backgroundColor.html' ... i am attaching the iamges

--> The thing is that there is only an issue with bar chart series2 rendering and only when the color is setted to transparent, all other charts are rendering fine

Barchart Test -->

Piechart Test -->

Comple Test -->