invalid transparent and rgba colors in saved SVG file

[mindon]

Version

v5.1.1

Reproduction link

https://uzihu.csb.app/

Steps to reproduce

1. render with option

     const option = {
        grid: {
          show: true,
          borderWidth: 3,
          fill: "transparent",
          borderColor: "rgba(255,0,0,1)"
        },
        toolbox: {
          feature: {
            saveAsImage: {
              name: "demo",
              type: "svg"
            }
          }
        }
      };

2. click save to image to download the svg result

3. drag the svg file into Powerpoint or Inkscape

What is expected?

1. transparent background

2. red border

What is actually happening?

1. black background

2. black background grid without border

---

valid SVG11 colors https://www.w3.org/TR/SVG11/types.html#DataTypeColor

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[KamilKozera]

Hi,

I encountered identical problem today while converting SVG to PDF with Inkscape. Inkscape interprets fill:'transparent' as fill:'black'. Here's a quick solution that might help anyone facing the same issue:

Replace 'transparent' with 'none' after setting the chart option and rendering the chart. This ensures that the code executes after the SVG content has been generated and is present in the DOM, allowing it to modify the SVG attributes as desired.

jsfiddle

var transparentElements = document.querySelectorAll('svg [fill="transparent"]');
transparentElements.forEach(function(element) {
  element.setAttribute('fill', 'none');
});

[plainheart]

@KamilKozera Thanks for your feedback. I believe this can work before v5.5.0 as ecomfe/zrender#767 fixed it. But in v5.5.0, to escape the behavior that fill: 'none' makes the SVG element not respond, the new SSR feature (see commit) overrides the none value to transparent, which brings this issue back unexpectedly. I will take a look if it can do the overriding conditionally.

cc: @Ovilia

TODOs:

• standard color issue
• potential text misplacement

[Ovilia]

@plainheart I have no objection to ecomfe/zrender#1076 but from the spec, we can see that transparent is a valid value for fill. Does this problem cause by the bug of SVG implementation of Powerpoint and Inkscape?

[Ovilia]

And from

A component must not be named ‘none’, because that would clash with the token for missing values.

we can know that the meaning of none is more like we don't know the color value for this element rather than this element doesn't have a color value.

So I think it should make sense to set transparent to elements without color.

That being said, if there is a bug with some implementation software, we could change as your PR to prevent exposing the bug.

[plainheart]

1. The change from 'transparent' to 'none' is to solve the compatibility issue in Powerpoint and Inkscape.
2. 'none' makes the element not interactable, so you changed it back to 'transparent' in this commit.
3. ecomfe/zrender#1076 is to solve both issues, we still use 'none' for no background while making the element interactable via setting the pointer-events attribute to 'visible'.

[Ovilia]

Thanks for clarifying the context, which I really got confused about. I've merged that PR. Thanks!